Blogger & Tutorial Zone's: Widget Tag Clouds pada Blog #2

Sebelumnya kita membahas Tag Clouds dgn fasilitas Delicious, pada artikel kali ini kita membahas Tag Clouds dengan bentuk animasi sehingga terkesan variatif.
Widget tag cloud ini terkesan lebih elegan karena menyajikan animasi gerak jika cursor diarahkan ke widget tersebut. Selama ini mungkin anda hanya mengenal tag cloud standar dengan kata kunci yang hanya berbeda pada besaran hurufnya saja. Nah, bagi anda yang senang mengutak-atik blog, tutorial yang satu ini patut untuk anda coba. Langkah awal, silahkan anda login dan masuk ke account blogger anda dan arahkan ke layout > edit HTML (jangan lupa untuk untuk download full template anda untuk backup jika sesuatu yang tidak diinginkan terjadi).

Langkah selanjutnya, silahkan cari kode di bawah ini :

<b:section class='sidebar' id='sidebar' preferred='yes'>

kalau sudah ketemu, silahkan letakkan kode dibawah ini tepat dibawah kode yang diatas :

<b:widget id='Label88' 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://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://hermanblogtips.blogspot.com'>Herman Blog</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "200", "150", "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='14'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Selesai, jangan lupa simpan template anda.

Catatan : silahkan atur angka 200 yang menunjukkan lebar dan angka 150 yang menunjukkan tingginya. Ganti nilainya sesuai dengan ukuran sidebar template anda. Sedangkan kode huruf ffffff menunjukkan warna background dan angka 333333 menunjukkan warna teks serta angka 14 menunjukkan ukuran teks. Silahkan diganti sesuka hati sesuai selera anda.

About The Author

Bie, that's my name. Im just an ordinary blogger.Ea eam labores imperdiet, apeirian democritum ei nam, doming neglegentur ad vis. Ne malorum ceteros feugait quo, ius ea liber offendit placerat, est habemus aliquyam legendos id. Eam no corpora maluisset definitiones.