Cara Membuat Label Cloud Berputar

Cara Membuat Label Cloud Berputar


Buat sobat yang pengen membuat tampilan labelnya seperti gambar disamping.

Label cloud berputar ini terlihat lebih menarik karena gerakannya yang dinamis sehingga dapat menarik perhatian para pengunjung blog kita dan label cloud ini gerakannya juga mengikuti cursor.
Sebenarnya untuk membuat label cloud berputar ini membutuhkan kode HTML yang lumayan agak panjang dan sobat harus menambahkannya pada template sobat, jadi saran ane saranin nanti sebelum mengedit template, ada baiknya backup terlebih dahulu template sobat.
I. Langkah Pertama


  • Login ke Blogger dengan ID sobat.
  • Klik Tata Letak
  • Klik tab Edit HTML
  • Download dahulu template sobat dengan mengklik Download Template Lengkap
  • Kemudian klik button Expand Template Widget dan cari kode yg seperti ini :

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

  • Copy kode berikut ini setelah kode diatas :

<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://vikrymadz.blogspot.com/'>vikrymadz</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;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&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>


II. Langkah Kedua
* Mengubah lebar dan tinggi kolom serta warna background
Angka "240" adalah lebar kolom
Angka "300" adalah tinggi kolom
Sedangkan #ffffff adalah kode untuk backgroud

* Merubah warna font, untuk kode warna bisa sobat lihat disini
so.addVariable("tcolor", "0x333333");

* Merubah ukuran font
so.addVariable("tagcloud", "12'>");


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


good luck sob...


Cassanova In The Hoy~09.34
Silahkan copas artkel di blog opic blog dengan menyertakan link sumber. Karena semua materi POSTING di lindungi hak cipta MERTUA

Tidak ada komentar:

pic blog merupakan media penyimpanan hasil karya dan kreasi di dunia jumper hardware ponsel, elektronika, tafsir mimpi dan tutorial blog dengan tujuan untuk pembelajaran sekaligus referensi. semua halaman yang ada di opic blog akan selalu di perbaharui... kolom ini akan di jadikan tempat tukar link...
Copyright © 2012 BerBagiBUNG™ || All About Sharing
Template by:Opic Blog