Di blogspot atau di blogger, kalau kita melihat tampilan label tag-nya biasanya tampilannya hanya biasa saja yang hanya menmpilkan widget yang berisi daftar label tag atau tag cloud blog pada umumnya.
Tapi kali ini kita akan berkreasi sedikit dengan kode HTML untuk membuat tampilan blog kita tambah keren dan menarik tentunya yaitu kita akan coba membuat label tag animasi di blogspot. Label tag animasi ini istilah lainnya adalah blogumus maksudnya adalah jika widget label tag blog kita terkena kursor mouse maka tag blog kita akan bergerak dan berputar dengan sendirinya.
Berikut ini adalah merupakan contoh dari label tag
Oke jika sobat tertarik juga dengan label tag atau tag cloud (blogumus) animasi ini, berikut cara membuatnya:
- Login ke dasbor blog sobat.
- Klik menu Rancangan.
- Pilih Edit HTML.
- Beri tanda centang "Expand Template Widget"
- Sebelum kode ini di masukkan, tolong copy template blog lama Anda dulu, dan pastekan di notepad untuk menjaga-jaga siapa tau template blog sobat tidak mendukung kode ini.
- Cari kode ini: <b:section class='sidebar' id='sidebar' preferred='yes'> (untuk kode, mohon untuk disesuaikan saja, karena tidak semua template memiliki kode yang sama).
- Selanjutnya letakan kode berikut, tepat di bawah kode diatas:
<b:widget id='Label99' locked='false' title='Label Tag' 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>
Perhatikan code di atas yang di beri warna, warna biru itu adalah merupakan judul label blog Anda nantinya, warna merah itu adalah merupakan ukuran lebar dan tinggi label cloud atau label tag, warna pink, adalah untuk merubah warna backgroud label tag cloud, dan warna hijau adalah untuk merubah besar kecilnya tulisan di tag/label cloud tersebut.
Catatan!!
Masalah yang sering kali muncul dalam pembuatan label tag atau tag cloud ini, yaitu:
Disebabkan karena file.swf yg sudah error.
Terus tidak semua template mendukung dibuatkan label tag atau tag cloud ini.
Coba perhatikan link file swf di atas yang di beri warna orange, jika link tersebut error atau tidak berfungsi maka coba diganti dengan file.swf berikit:
http://www.swfcabin.com/swf-files/1275932799.swf
Nah, begitulah dia cara membuat label tag atau tag cloud atau istilah lainnya blogumus, dan sekarang silahkan percantik tampilan blog Anda dengan label tag animasi ini.
0 komentar :
Posting Komentar