Membuat Label Cloud Berputar

     Label (tag) adalah kata kunci non hierarki atau tidak bertingkat yang tugasnya adalah menunjukkan potongan-potongan informasi (seperti petunjuk internet,gambar digital,atau file komputer). Label merupakan jenis metadata yang membantu untuk menjelaskan suatu hal dan memungkinkan hal tersebut ditemukan ketika melakukan pencarian (browsing).

     Label yang akan saya terangkan kali ini adalah label yang berada di blogger. Di blogger ada 2 macam yang bisa dgunakan secara default, yaitu cloud dan daftar.  Untuk contoh tampilan label bisa di lihat di bawah ini :

             Label Cloud                                                                           Label Daftar

     Tapi kali ini saya akan memberikan sedikit variasi pada label jenis cloud. Pada variasi ini label cloud akan lebih menarik. Tampilannya bisa dilihat di bawah ini : 

     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. 

     Karena untuk membuat label cloud berputar memerlukan kode HTML yang cukup panjang, sebaiknya kalian membackup dulu template kalian, agar bila terjadi sesuatu hal yang tidak diinginkan bisa dengan mudah mengmbalikan ke keadaaan semula. 

Langkah-langkahnya :

1. Login ke Blogger dengan ID kalian
2. Klik Tata Letak
3. Klik tab Edit HTML
4. Backup dulu template kalian dengan mengklik Download Template Lengkap
5. Kemudian klik button Expand Template Widget dan cari kode yg seperti ini :          <b:section class='sidebar' id='sidebarright' preferred='yes'>                                                agar lebih cepat, bisa menggunakan fasilitas ctrl+f lalu tinggal copy paste aja kode yang di atas.
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://sites.google.com/site/bloggerustemplatus/code/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://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>                                                                                                                                                                               
7. Kemudian Simpan Template kalian dengan mengklik Simpan Template
8. Kalian bisa merubah ukuran dari label sesuai dengan yang kalian inginkan dengan merubah/mengedit kode yang berwarna merah yang kita copy tadi. keterangan :                        Angka "240" adalah lebar kolom, rubah angkanya sesuai dengan lebar kolom yang diinginkan  Angka "300" adalah tinggi kolom, rubah angkanya sesuai dengan tinggi kolom yang diinginkan Sedangkan #ffffff adalah kode untuk backgroud, rubah kodenya untuk merubah warna background dari label.
9. Jika masih tidak berfungsi coba ubah labeh daftar menjadi label cloud seperti di bawah ini :

     Itulah sedikit tutorial dari saya. Terima kasih buat roytanck, miscah dan amanda fazani yang telah menyediakan javascript untuk label cloud ini. Bila ada masalah atau atau yang masih tidak dimengerti bisa ditanyakan langsung di komentar, Wassalamualaikum wr. wb.

Posted in: tips blogging,tutorial