Membuat Widget Tags Label dengan Mode Animasi Berputar

 

Membuat Widget Tags Label dengan Mode Animasi Berputar - Agar blog tampak lebih menarik, admin bisa membuat tampilan yang animatif. Ada beragam cara mendesain blog agar lebih menarik. Untuk kali ini, yang dibahas adalah membuat tags label yang menarik. Bentuknya mode tampilan berputar, dan bila disentuh mouse akan berhenti pada tulisan label yang dipilih.

Kemudian sebelum menjelaskan lebih jauh, saya akan sedikit mengulas apa itu tags label. Tags label adalah kumpulan penanda yang mewakili isi konten blog atau bisa pula diartikan sebagai kumpulan keyword pada blog. Tags label bisa diganti nama menjadi kategori, tags cloud, dan lain-lain.

Artikel referensi Upload Gambar Blog Makin Mudah Melalui Picasa Web.

Baiklah, berikut tahapan cara membuat tags label dengan mode animasi berputar pada sidebar.

Cara membuat widget tags label dengan mode animasi berputar

1. Buka akun blogger, lalu pilih HTML pada menu Template.

2. Cari kode ini dengan Ctrl+F :

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

3. Lalu pastekan kode berikut tepat di bawah kode tadi.

<b:widget id='Label99' locked='false' title='Kategori' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2> <data:title/></h2> </b:if> <div class='widget-content'> <script src='http://anvity.googlecode.com/files/swfobject.js' type='text/javascript'/> <div id='flashcontent'> Blogumulus by <a href='http://www.anvity.blogspot.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a> Distributed by <a href='http://bloging-gampang.blogspot.com/'>Owen Paijo</a></div> <script type='text/javascript'> var so = new SWFObject("http://sites.google.com/site/ruangsc/enes/tagcloud.swf", "tagcloud", "300", "250", "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>

Ada beberapa kode yang bisa dirubah sesuai keinginan.

Tittle : Kategori

Lebar widget : 250px

Tinggi widget : 300px

Warna latar (background) : #ffffff (putih)

Warna huruf : 0x333333 (abu-abu)

Ukuran huruf : 12 

Catatan : Pastikan sahabat backup dulu templatenya supaya tidak terjadi kebingungan. Atau tidak perlu membackup, namun dengan cara Ctrl+Z hingga ke template semula bila terjadi kesalahan.

4. Klik preview template. Jika sudah sesuai keinginan, klik Save template.

Trik pilihan Cara Menampilkan Judul Postingan Saja pada Homepage Blog.

Demikian tutorial membuat widget tags label dengan animasi berputar kali ini. Semoga bermanfaat. Dan selamat mencoba.