Membuat Label Blog Berputar Putar

Kelebihan Widget ini adalah bahwa dia bisa berputar-putar sehingga terlihat sangat menarik menyerupai bola. Serta dapat meghemat ruang pada blog kita agar tidak terlalu menjulang panjang kebawah.

langkah-langkahnya adalah :

1. Login terlebih dahulu ke Blogger anda
2. Pilih Tab Layout
3. klik Edit HTML
4. Jangan lupa Expand Widget Template diberi tanda centang
5. Sebelumnya jangan lupa anda backup terlebih dulu template anda, agar jika terjadi error anda tinggal 
   upload template anda lagi. :)

Penting :

Untuk mempermudah pencarian kode atau script klik tombol Ctrl + F pada keyboard anda dan masukkan kode Pada taks find

Langkah Pertama

1. Cari code </head>

Lalu copy paste script dibawah ini dan taruh di atas kode </head> 
<style>
#xsnazzy{margin:0 0 10px 0; background:transparent}
.xtop, .xbottom{display:block; font-size:1px; background:transparent}
.xb2, .xb3, .xb4{display:block; overflow:hidden; background: #FFFFFF ; border-left:1px solid #0066FF ; border-right:1px solid #0066FF }
.xb1, .xb2, .xb3{height:1px}
.xb1{background: #0066FF ; display:block; overflow:hidden; margin:0 5px}
.xb2{border-width:0 2px; margin:0 3px}
.xb3{margin:0 2px}
.xb4{height:2px; margin:0 1px}
.xboxcontent{display:block; padding:5px; background: #FFFFFF ; border:0 solid #0066FF ; border-width:0 1px}
</style>

Keterangan :

Keterangan dibawah ini bertujuan jika anda ingin menganti warna pada tag clould cumulus.

   a. #FFFFFF = warna background
   b. #0066FF = warna garis tepi

Silahkan anda rubah sendiri warna sesuai keinginan anda, disarankan sesuai warna blog anda
Jika anda tidak tahu kode-kode warna di HTML

2. Save template anda.

Langkah Kedua

1. Menaruh script HTML pada Gadget
    a. Plih tambah Gadget
    b. Pilih html/javaScript

copy script dibawah ini:
<b:section id='sidebar9' preferred='yes' showaddelement='no'>
<b:widget id='Label9' locked='false' title='Label' type='Label'>
<b:includable id='main'>
<div id='xsnazzy'>
<b class='xtop'><b class='xb1'/><b class='xb2'/><b class='xb3'/><b class='xb4'/></b><div class='xboxcontent'&gt;
<b:if cond='data:title'>
<h2 style='font-family:arial'> Tutorial Blog </h2>
</b:if>
<div class='widget-content'><center>
<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>Distributed by <a href='http://analisis-fiqih.blogspot.com'>Cahaya Biru</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", " 330 ", " 200 ", "9", " #FFFFFF ");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x 333333 ");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
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>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</center></div>

</div><!--xboxcontent-->
<b class='xbottom'><b class='xb4'/><b class='xb3'/><b class='xb2'/><b class='xb1'/></b>
</div><!--end of xsnazzy-->

</b:includable>
</b:widget>
</b:section>
Keterangan:

a. Tulisan warna biru " Tutorial Blog" adalah title dari Widget. Anda bisa merubah sesuka anda.
    Misalnya: kategori artikel, Grup Artikel, dan sebagainya.

b. Tulisan warna merah  = kode HTML pembuka (yang diatas) dan bingkai penutup (yang dibawah) dari
    bingkai Rounded corner.

c. Tulisan warna merah muda adalah kode-kode yang berhubungan dengan Widget.

   1. Angka 330           = lebar pixel widget
   2. Angka 200           = tinggi pixel widget
   3. 333333                = kode warna dari Tulisan
   4. #ffffff                    = kode warna dari Background Widget (sudah dijelaskan di langkah pertama)
   5. Angka 12             = ukuran font dari widget (Tips jika kategori atau label anda masih sedikit lebih baik
                                      ukuranya font di perbesar.

save tamplate anda terus lihat hasilnya...

Posted in: Tutorial Blogspot