Cara Memasang Widget Label Tag Cloud (Animasi Berputar)

Bookmark and Share
Cara Mudah Memasang Label Cloud (Label Berputar) - Setelah saya mengulas tutor cara memberi efek scroll pada kotak komentar, saya mencoba share tutorial yang membahas tentang fasilitas label pada blog. Label ini dapat sedikit kita modifikasi sehingga tampilannya akan lebih menarik. Salah satunya adalah dengan memberi efek pada label tersebut sehingga label akan menjadi berputar-putar ketika kursor diletakan di salah satu kata dari label tersebut.

Bagaimana cara pembuatannya?

Untuk cara pembuatannya, perlu lebih di pahami lebih dalam untuk menghindari hal-hal/kesalahan yang tidak diinginkan saat sedang pengcodingan.
Adapun langkah demi langkah:
1. Pastikan anda sudah login ke akun Blogger/Google anda.
2. Dari halaman Dasbor akun Blogger anda, klik Tata Letak dan pilih Edit HTML.
3. Modifikasi terlebih dahulu kode berikut.
<b:widget id='Label99' locked='false' title='Tag Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://anvity.googlecode.com/files/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.anvity.blogspot.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a> Distributed by <a href='http://www.anvity.blogspot.com'>Tifan Dwi Avianto</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/ruangsc/enes/tagcloud.swf", "tagcloud", "250", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
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>
Note:
Pada script diatas, silahkan sesuaikan dengan lebar sidebar (jika ingin ditampilkan di sidebar), background sidebar atau agar lebih cocok dengan template blog anda.
1. Lebar widget : 250px
2. Tinggi widget : 300px
3. Warna latar (background) : #ffffff (putih)
4. Warna huruf : 0x333333 (abu-abu)
5. Ukuran huruf : 12 
Untuk mengubah warna huruf, ubah saja kode setelah kode 0x diatas. Misal, untuk mengubahnya agar warna hurufnya menjadi hitam ditulis 0x000000. Untuk lebih jelas tentang kode-kode warna, silahkan rujuk: Hex Color Generator.

4. Setelah anda selesai memodifikasi script tersebut, letakkan script tersebut dibawah kode berikut:
<b:section class='sidebar' id='sidebar' preferred='yes'>
Note:
Untuk mempermudah pencarian script tersebut, gunakan fasilitas Ctrl+F atau F3.
5. Lakukan Pratinjau. Jika berhasil, Save Template. Done!

Selamat Mencoba dan Semoga Berhasil!

Title Post: Cara Memasang Widget Label Tag Cloud (Animasi Berputar)
Rating: 100% based on 9999989 ratings. 98 user reviews.
Author: Borneo08

Terimakasih sudah berkunjung di blog ini, Jika ada kritik dan saran silahkan tinggalkan komentar

Related Posts Plugin for WordPress, Blogger...