Wednesday, December 16, 2009
Cara Memasang Tag Clouds di Blogger
Waktu saya lagi iseng-iseng mencari data di Google untuk dijadikan bahan artikel di blog saya, tanpa sengaja saya mampir ke blog orang lain. Disitu terdapat widget label yang dapat bergerak-gerak saat mouse kita mengarah kepada label yang kita ingin tuju karena label itu berbentuk flash atau animasi. Saat itu, saya mulai penasaran dengan widget tersebut. Saya mencoba mencari tahu mengenai widget tersebut dengan mencari-cari di Google. Setelah sekian lama mencari, akhirnya saya menemukan juga artikel yang membahas widget tersebut. Ternyata widget tersebut bernama Tag Clouds.
Untuk membuat label bergerak / Tag Clouds seperti ini, pertama pastikan anda sudah melakukan login pada Blogger anda. Setelah masuk pada bagian Dashboard, kita pilih Layout ==> Edit HTML. Beri tanda checklist pada bagian Expand Widget Template supaya kita mendapatkan back up template yang sebelumnya jika ada kesalahan. Selanjutnya, kita cari kode seperti ini :
<b:section class='sidebar' id='sidebar' preferred='yes'>
Untuk mempermudah pencarian, kita cukup menekan CTRL+F. Tombol itu berguna untuk memunculkan kotak search / find supaya mempermudah kita untuk melakukan pencarian kode seperti diatas (jika kode diatas tidak ditemukan, coba kalian hapus satu persatu kata dimulai dari belakang sampai kita menemukan kode HTML yang tepat). Setelah menemukan kode HTML seperti diatas, langkah berikutnya adalah dengan menuliskan kode HTML berikut ini tepat dibawahnya.
<b:widget id='Label5' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "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>
Jika kode diatas telah anda tuliskan, langkah selanjutnya hanya tinggal kita klik Simpan Template. Buka blog anda dan lihat perubahannya.
<b:section class='sidebar' id='sidebar' preferred='yes'>
Untuk mempermudah pencarian, kita cukup menekan CTRL+F. Tombol itu berguna untuk memunculkan kotak search / find supaya mempermudah kita untuk melakukan pencarian kode seperti diatas (jika kode diatas tidak ditemukan, coba kalian hapus satu persatu kata dimulai dari belakang sampai kita menemukan kode HTML yang tepat). Setelah menemukan kode HTML seperti diatas, langkah berikutnya adalah dengan menuliskan kode HTML berikut ini tepat dibawahnya.
<b:widget id='Label5' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "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>
Jika kode diatas telah anda tuliskan, langkah selanjutnya hanya tinggal kita klik Simpan Template. Buka blog anda dan lihat perubahannya.
Catatan :
Jika anda ingin mengedit tampilan Tag Clouds pada blog anda, ubahlah bagian kode yang di beri warna Merah.
- Untuk merubah panjang dan lebar Tag Clouds
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
- Untuk merubah warna Background
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
- Untuk merubah warna Font
so.addVariable("tcolor", "0x333333");
- Untuk merubah Font Size
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>");
- Labels: Tutorial Blogger
