Tutorial Membuat Label Berputar (LABEL CLOUDS)

Label cloud ini akan memperindah tampilan blog kita, blog kita akan terlihat lebih menarik karena gerakannya yang dinamis yang ditimbulkan oleh label cloud ini
goyangannya mengikuti jika kita arahkan cursor ke label
cloud tersebut terlihat tulisannya mengikuti cursor.

untuk membuat label cloud jelas membutuhkan kode-kode HTML yang sangat sulit untuk kita buat, terutama untuk para pemula yah seperti aku ini. tapi jangan khwatir tips ini aku dapatkan dari mbah GOOGLE dari berbagai sumber dan terbukti berhasil... jika belum berhasil kirim saja komentar nanti saya akan bantu semampunya...
oke langsung saja sebelum sobat merubah kode HTML blog sebaiknya
download terlebih dahulu template sobat, sebagai antisipasi jika nanti gagal. caranya biasa masuk tata letak -> edit HTML -> centang "Expand Template Widget". trus klik "Download Template Lengkap" untuk mendownload templet sobat.

oke sekarang kita membuat LABEL CLOUDS
caranya :

1. Masuk ke Blogger dengan ID sobat!
2. Pilih Tata Letak
3. Edit HTML
4. Kasi tanda centang pada Expand Template Widget
5. aku ingatkan lagi nieh!! "back up dulu template kalau sobat takut gagal"
6. Cari kode ini : <b:section class='sidebar' id='sidebar' preferred='yes'>
   cara mencarinya tekan "ctrl+f (menggunakan keyboar)" paste kode di atas "klik find next". ketemu kan??.. kalau tidak ktmu cari yang ini saja <b:section class='sidebar' id='sidebar1' preferred='yes'>
   jika tidak ketemu juga cari saja kode yang mirip seperti itu.. masalahnya template blogger berbeda2
7. Copy seluruh kode dibawah ini, terus paste tepat dibawah kode di atas (yang tadi di cari).

<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>

8. Angka 240 dan 300 merupakan width dan height dari label clouds, ganti oleh sobat sesuai dengan ukuran lebar dan panjang sidebar blog anda
Kode warna #ffffff merupakan kode dari warna hitam yaitu warna dari lay out label clouds, gantilah dengan warna pilihan sobat
Kode 333333 merupakan kode warna putih dari tulisan yang akan muncul, ganti kode warna tersebut dengan warna pilihan sobat.
Angka 100 merupakan kecepatan perputarantulisan dalam label clouds, semakin besar angkanya semakin cepat berputarnya tulisan dalam label clouds, begitu juga sebaliknya,
Angka 12 merupakan ukuran tulisan yang akan muncul di dalam label clouds.

9. klik tombol (save) Simpan template.
10. jadi deh lebelnya .coba lihat blog sobat sekarang...!!!

Artikel Terkait Lainnya