Seperti yang sobat tahu, Blogumus atau istilah lainnya label/tag cloud dengan animasi ini biasa kita lihat di blog wordpress mampun blogspot. label cloud ini fungsinya gak jauh beda dengan label-label pada umumnya, cuman tampilannya yang lebih menarik dan keren pastinya, karena bila label cloud tersebut terkena mouse akan bergerak/berputar dengan sendirinya.
berikut contoh gambar dari widget tag/label cloud blogumus:
Demo
Cara membuatnya sebagai berikut:
- Login ke akun blogger sobat
- Masuk rancangan/design
- Pilih edit HTML
- Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
- Beri tanda centang "Expand Template Widget"
- Cari kode berikut: <b:section class='sidebar' id='sidebar' preferred='yes'> (untuk kode, mohon untuk disesuaikan saja, seperti yang saya bilang tidak semua template memiliki kode yang sama)
- Selanjutnya letakan kode berikut, tepat di bawah kode diatas:
<b:widget id='Label99' locked='false' title='Label Blogumus' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/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://sites.google.com/site/bloggerustemplatus/code/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>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/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://sites.google.com/site/bloggerustemplatus/code/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>
- Preview'lah terlebih dahulu, sebelum di Save, Perhatikan text yang di beri warna pada kode di atas, warna biru itu adalah judul label, warna orange itu adalah untuk merubah lebar dan tinggi label cloud. warna kuning, untuk merubah warna backgroud label/tag cloud, dan warna hijau untuk merubah besar kecilnya tulisan di tag/label cloud tersebut
Penting!!
Masalah yang sering muncul dalam pembuatan label/tag cloud ini, yaitu:
Disebabkan karena file.swf yg sudah error.
Tidak semua template bisa di buat label/tag cloud ini. tapi cara diatas sudah saya coba di template sya ini dan sukses.
Tambahin lagi neh buat file.swf-nya, bila dengan file.swf (perhatikan text berwarna merah pada kode diatas, itu adalah link file.swf, gantilah dengan file.swf berikit:
http://www.swfcabin.com/swf-files/1275932799.swf
Seperti itulah kiranya cara membuat label/tag cloud, selamat mencoba dan semoga bermanfaat.
Credit by: Roy Tanck and Amanda Fazani
ane pernah liat sob yang kaya gini di blog saat ane kesasar, ane kira itu hanya pake script. ternyata harus ke edit html ya. ane jarang main di edit html sob, apa lagi klo dah yang agak sedikit rumit!! masalahnya selama ini ngeblog hanya berguru dari membaca, jadi klo dah ada trabel bgg dah ane heeee, klo main di scipt kan tinggal di apus aja. tapi nice lah ni info sob,buat tambah2 ilmu.
BalasHapus@Blog Sederhana: Maksih sebelumnya sob, oia, sekedar masukan aja neh sob??
BalasHapusSemisal kita sedikit ragu/takut untuk edit2 di bagian html, terlebih dahulu sebelum di edit, backup dulu template-nya, dengan cara klik "Download Template Lengkap" ini bertujuan bila sewaktu-waktu kita mengalami kendala/masalah dalam mengedit template, kita tinggal upload kembali file.template yg sudah kita download sebelumnya.
Salam kenal Sob :)
makasih masukannya sob, kadang klo untuk yang nyoba2 ane buat blog sendiri,tapi ya terkadang itu juga masih belum berani ke yang aga rumit untuk edithtml.
BalasHapussekarang ini yang pengen ane pelajarin adalah batasan posting sama gadget sob, ane pgn perkecil ukuran batasannya, biar ruang agak lebaran dikit.
@Blog Sederhana: Iya sob, gak ada salahnya kan buat mencoba. hehee
BalasHapusOhhh... maksudnya mengatur jarak antara posting dari sidebar po sob ?? itu jg blognya udah rapi koq.
Ok deh.. sukses slalu sob, keep blogging pokoke :D
Wahh..
BalasHapusAku udah coba sobb, thank'z yach udah mensharing artikel ini sangat bermanfaat dech hehee..
Ok, sama-sama sob... :)
BalasHapusThank You very much, its totally work... ;D
BalasHapusYou'r Wellcome... :)
BalasHapusthanks infonya kawand, aku menemukan sesuatu yang aku cari di sini...
BalasHapus