Selasa, 28 Mei 2013

Cara Membuat Tag Cloud, Label Berputar-putar di Blog

Ingin buat daftar label dalam bentuk animasi? Atau sobat sudah pernah lihat widget tersebut? Itu namanya Tag Cloud atau daftar label yang berputar-putar saat di sentuh mouse. Ingin tau cara buatnya?. Kali ini tutorial saya yaitu Cara Membuat Tag Cloud / Daftar Laber Berputar-putar di Blog.

1.  Pastinya harus login dulu ke blog sobat.
2.  Setelah di dashboard, pilih menu Template trus klik Edit HTML
3.  Untuk template lama silakan cari kode (gunakan ctrl + F)

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

Untuk template baru silakan cari kode (gunakan ctrl + F):

<b:section-contents id='sidebar-right-1'>

4.  Setelah ketemu, copy kode berikut dan pastekan tepat dibawah kode yang sobat cari tadi.

<!-- Code Buat Tag Cloud-->
<b:widget id='Label99' locked='false' title='Tag Cloud Comulus 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://ahmadrizal777.blogspot.com/'>Roy Tanck</a> and <a href='https://twitter.com/ahmadrizaal'>@ahmadrizaal</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;180&quot;, &quot;7&quot;, &quot;#222222&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0xffffff&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<!-- Akhir Code Tag Cloud-->


5.  Sebelum di save, alangkah baiknya jika di pratinjau terlebih dahulu, jika sukses silakan di Save.

Keterangan :
240 adalah lebar widget
180 adalah panjang widget
#222222 adalah kode warna background widget



Selamat berkreasi dan salam Blogger...

2 komentar:

  1. mantab bosss udah saya coba berhasil
    http://syaffa29assidyi.blogspot.com/

    BalasHapus
  2. sebelumnya makasih atas infonya, tapi kode saya cari-cari kok tidak ada?

    BalasHapus