Apa itu Tag Cloud? blogger senior pastinya udah tau donk... tapi apa salahnya sekedar sharing buat yang baru belajar... tag cloud sebenarnya tampilan label atau kategoris yang dimodifikasi. Biasanya label itu berupa kumpulan dari suatu postingan dengan label yang sama ??? dan ada yang tertera jumlah postingan dengan label yang sama... nah banyak metode untuk memodifikasi tag cloud ini, ya di postingan ini tag cloudnya berupa animasi thanks to Blogger Buster atas postingan yang menarik... lalu yang bagaimana sih tag cloudnya?? lihat aja di bawah ini..
Nah ini dia langkah-langkahnya:
1. Biasa Login Blogger
2. Menuju layout dan edit HTML lalu centangin dah tuh expand widget templates
3. Jangan lupa download full template buat ngeback up soalnya ada bagian body yang diubah sedikit...
4. pastikan kamu telah memasang widget label atau kategori kalau belum pasang dulu
caranya masuk "page elemnent" lalu "add a gadget" pilih label lalu save dan kembali ke layout-->edit HTML-->centang expand widget templates
5. Mulai beraksi
6. Cari kode
<b:section class='sidebar' id='sidebar' preferred='yes'>
7. Istirahat dulu donks... ngupi-ngupi dulu
8. lanjut... kalo udah ketemu lalu kamu akan melihat kode dibawah ini tepat berada dibawah kode <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/> </b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<ltspan expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/> </b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<ltspan expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
9. Kamu ganti kode itu dengan kode dibawah ini
<b:widget id='labelku' 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>
<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>
9. Lalu save dan perhatikan apa yang terjadi...
Trus gimana donk sidebarnya gak cukup nih... nah kamu bisa mengedit sedikit dari kode yang udah kamu copy dan paste.. huhu
Merubah dimensi panjang dan lebar tag cloud serta background tag cloud
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff")
Kamu bisa mengganti angka 240 untuk panjang dan 300 untuk lebar dan background color dengan mengganti kode #ffffff sesuai keinginan kamu tentunya...
Mengganti warna huruf atau font color dan merubah ukuran huruf atau font size
so.addVariable("tcolor", "0x333333");
Kamu bisa mengganti kode 333333 dengan selera warna kamu tentunya dengan kode html yah dan ganti angka 12 dibawah ini sesuai dengan selera kamu...
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>");
Subscribe to:
Post Comments (Atom)
0 comments for this post