Sabtu, April 24, 2010

Membuat Label Animasi

Label Cloud animasi sangat bagus untuk mempercantik blog kalian semua loh sobat semua, kalau ingin melihat demo atau screenshoutnya lihat saja di sidebar sebelah kanan saya. Mungkin Trik ini banyak yang sudah membagikannya/ mem-Publishnya namun apa salahnya kalau say membagikannya lagi?? kenapa saya membagikannya kembali?? karena ada seorang visitor di blog saya yang menginginkan Widget tersebut makannya saya buat.

Sebenarnya trik Membuat Label Cloud animasi ini saya dapatkan dari Bloggerbuster yaitu salah satu blogger master di dunia blog, kalau saya boleh kasih tips, Widget ini tidak memberatkan Kecepatan loading blog sobat loh karena Javascript yang digunakan tidak di upload jadi tidak perlu dipanggil. oke mungkin sekian ajach cuap-cuapnya sekarang kita menuju langkah-langkahnya :
  1. Login ke blogger
  2. Masuk ke Tata letak, Edit HTML
Setelah itu klik kotak yang berada di samping tulisan Expand Widget Template
Sebelum kita melakukan pembedahan (kaya dokter ajach ) mari kita backup terlebih dahulu untuk menghindari kerusakan pada template sobat.
oke setelah mem-backup langsung ajach cari kode lalu taruh kode ini di bawahnya
<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'/>
<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 dan sobat juga bisa menggantinya
kode yang 300 menunjukan panjang dari Widget itu sobat bisa menggantinya dengan memperbesar atau memperkecilnya
kode yang 200 menunjukan Lebar dari Widget itu sobat bisa menggantinya dengan memperbesar atau memperkecilnya
kode yang berwarna Hijau menunjukan warna dari Teks yang ada di dalam Widget itu, sobat juga bisa menggantinya
kode 100 menunjukan kecepatan berputarnya widget itu, sobat juga bisa menggantinya apabila sobat ingin mempercepat sobat bisa tambah nominalnya atau sebaliknya.

Nah sekarang sobat bisa simpan.

Bagaimana dengan Trik Membuat Label Cloud animasi?? mudah bukan pemasangannya?? kalau sobat ada kesulitan dalam pemasangannya sobat bisa beritahu saya lewat Kotak komentar atau langsung Chat With YM. oke sekian dari saya Terima Kasih and Happy Blogging.

2 komentar:

  1. maaf sob bukannya saya pelit tapi kalau mau copas dari blog saya alangkah baiknya di kasih sumbernya. Terima kasih

    BalasHapus
  2. sob perassan dah ku tambah di frien link deh.....

    BalasHapus