Membuat Label Blog Berputar

Apa Sih Label Cloud / Label Yang Berputar......????


Label cloud ini terlihat lebih menarik karena gerakannya yang dinamis sehingga dapat menarik perhatian para pengunjung blog kita dan label cloud ini gerakannya juga mengikuti cursor, coba sobat arahkan cursor ke label cloud tersebut, terlihat tulisannya mengikuti cursor sobat.

Sebenarnya untuk membuat label cloud ini membutuhkan kode HTML yang lumayan agak panjang dan sobat harus menambahkannya pada kode HTML template sobat, jadi saran saya nanti sebelum mengedit template, ada baiknya download terlebih dahulu template sobat atau bisa sobat simpan di notepad juga tidak apa-apa.

^^^Langkah Pertama

1. Login ke Blogger dengan ID sobat.
   
   
2. Klik "Tata Letak"
   
   
3. Klik tab "Edit HTML"
   
   
4. Download dahulu template sobat dengan mengklik "Download Template Lengkap"
   
   
5. Kemudian klik button "Expand Template Widget" dan cari kode yang seperti ini
   
   
   <b:section
   class='sidebar' id='sidebar' preferred='yes'>
   
   
   
6. 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://halotemplates.s3.amazonaws.com/wp-cumulus-example/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(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/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>
   
   
   
   
   
7. Kemudian Save Template

^^^Langkah Kedua

1. Mengubah lebar dan tinggi kolom serta warna background
   
   
   
   var so = new
   SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf",
   "tagcloud", "240", "300",
   "7", "#ffffff");
   
   
   
   
   • Angka "240" adalah lebar kolom
     
   • Angka "300" adalah tinggi kolom
     
   • Sedangkan #ffffff adalah kode untuk backgroud
     
   
   
2. Merubah warna font, untuk kode warna bisa sobat lihat disini
   
   
   
   so.addVariable("tcolor", "0x333333");
   
   
   
   
3. Merubah ukuran font
   
   
   
   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>");