Pagi-pagi blogwalking, gak sengaja liat label cloud animasi, jadi keinget req sobat @Zhanaz45, beberapa hari lalu, hehehe, maaf sob, lupa saya.... :D
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
Komentar :
Posting Komentar
Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda, karena setitik kata komentar anda akan sangat berharga untuk kemajuan blog ini, Trims atas kerja samanya...