Tutorial blog

Info Kerja

Info Beasiswa

Recent Post

Mempercantik label blog dengan animasi

Monday, January 24, 2011
Untuk membuat blog anda semakin cantik, membuat label blog dengan animasi merupakan pilihan yang patut di coba. preview dari hasil yang pernah saya lakukan bisa dilihat di sini. Langsung saja mengenai cara pembuatannya adalah sebagai berikut :
  1. Login ke blogger
  2. Masuk ke Tata letak ==>> Edit HTML
  3. Setelah itu klik kotak yang berada di samping tulisan Expand Widget Template
  4. Sebelum kita melakukan pembedahan (kaya dokter ajach :D) mari kita backup terlebih dahulu untuk menghindari kerusakan pada template sobat.
  5. oke setelah mem-backup langsung ajach cari kode <b:section class='sidebar' id='sidebar' preferred='yes'> lalu taruh kode ini di bawahnya

    -----------------------------------------------------------------------------
    <b:widget id='Label23' locked='false' title='' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <script src='http://oketrik.googlecode.com/files/swfobject.js' type='text/javascript'/>
    <div id='flashcontent'></div>
    <script type='text/javascript'>
    var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "300", "200", "7", "#000000");
    // uncomment next line to enable transparency
    //so.addParam("wmode", "transparent");
    so.addVariable("tcolor", "0x00ff00");
    so.addVariable("mode", "tags");
    so.addVariable("distr", "true");
    so.addVariable("tspeed", "100");
    so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
    so.addParam("allowScriptAccess", "always");
    so.write("flashcontent");
    </script>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>

    -----------------------------------------------------------------------------

    Penjelasan :
    • kode yang berwarna Merah menunjukan warna Background, bisa diganti
    • kode yang 300 menunjukan panjang dari Widget itu, bisa menggantinya dengan memperbesar atau memperkecilnya
    • kode yang 200 menunjukan Lebar dari Widget itu, bisa menggantinya dengan memperbesar atau memperkecilnya
    • kode yang berwarna Biru menunjukan warna dari Teks yang ada di dalam Widget itu,
    • kode 100 menunjukan kecepatan berputarnya widget itu,

  6. Save template


        Semoga bermanfaat

      .   Ari Ahmad Afandi

Related post



2 comments:

Kolom Lyrics at: December 6, 2011 at 11:40 PM said...

nggak ada previewnya ya...???

Anonymous at: December 7, 2011 at 7:58 AM said...

Itu yang sebelah kanan dari page ini kang..
Ada label2 yang melayang2...

Post a Comment