Cara Membuat Label Cloud Berputar

Unknown

Trik Blog

13 Nov 2013

Belum ada komentar

Saat ini model atau bentuk label ada 3, label daftar atau yang biasa (standard), label cloud (acak), dan label cloud berputar(rolling). Yang akan kita bahas sekarang adalah memasanglabel cloud berputar (rolling) di blog

Label cloud berputar ini terlihat lebih menarik karena gerakannya yang apik sehingga dapat menarik perhatian para pengunjung blog kita dan label cloud ini gerakannya juga mengikuti cursor pointer.

Tapi untuk membuat label cloud berputar ini membutuhkan kode HTML yang lumayan agak panjang dan sobat harus menambahkannya pada template sobat, jadi saran saya nanti sebelum mengedit template, baiknya biasakan backup terlebih dahulu template sobat. 

I. Langkah Pertama

Login ke Blogger dengan ID sobat. 

Klik Tata Letak 

Klik tab Edit HTML 

Kemudian klik button Expand Template Widget dan cari kode yg seperti ini :

<b:section class='sidebar' id='sidebar' preferred='yes'> atau <b:section-contents id='sidebar-left-1'> 

Copy kode di bawah ini di bawah kode di atas :

<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'>Wayan Susandiarta Blog by <a href='http://susandiartawayan.blogspot.com/'>Wayan Susandiarta</a> and <a href='http://wayansusandiarta.blogspot.com'>Wayan Susandiarta</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;auto&quot;, &quot;300&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;0xFF00FF&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> 

Setting perubahan :

Angka "auto" adalah lebar kolom
Angka "300" adalah tinggi kolom
#222222 adalah kode untuk background
"0xFF00FF" Merubah warna font
Ukuran huruf : 12

Jika dalam membuat label cloud ini tidak berfungsi, silahkan sobat ganti label text menjadi label cloud. Perhatikan gambar dibawah ini :