Cara Memasang Tag Cloud ( Flash Mode )

Tutorial kali ini Bang IchsanX akan membagikan tentang bagaimana cara membuat Tag Cloud versi terbaru yaitu dengan animasi atau flash. Buat kalian yang bosen dengan tampilan tag cloud yang biasa, kalian bisa coba alternativ ini.

Berikut contoh tampilan Tag Cloud Flash

    * Login ke Blogger.com
    * Kemudian Tata Letak
    * Pilih Edit HTML
    * Centang Expand Widget
    * Cari kode berikut "<b:section class='sidebar' id='sidebar' preferred='yes'>"
        Atau "<b:section class='sidebar section' id='Sidebar4' preferred='yes'>"
        Atau "<b:section-contents id='sidebar-right-1'>"

Di bagian bawah kode tersebut masukkan kode berikut

<b:widget id='Label99' 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://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.ichsanx.blogspot.com/'>IchsanX</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>

Simpan Template

* Ganti teks berwarna Hijau dengan ukuran gadget kalian ( sesuaikan agar terlihat menarik )

* Ganti teks berwarna Merah Dengan kode warna yg kalian inginkan. ( Ganti warna background )

* Ganti teks berwarna Orange dengan kode warna yang kalian inginkan. ( Ganti Warna pada Tulisan )


Nb: Merubah warna font untuk warna bisa dilihat disini 
       Mengganti Background dengan Gradient Image Di sini

Artikel Terkait: