Cara membuat label berputar - putar "tag clould cumulus"
Terimakasih buat mas ervan atas pertanyaanya, sebenarnya label yang berputar-putar bernama tag clould cumulus. Tag Cloud Cumulus pada blogger disebut juga Blogumus. Sejarahnya, Tag Cumulus ini dibuat oleh Mr. Roy Tanck, kemudian diadaptasi oleh Mrs Amanda. Awalnya, tags cumulus dipakai bagi wordpress, kemudian disesuaikan ke Blogger oleh Mrs Amanda dan Mr. Roy Tanck.
Tag Cumulus adalah sebuah fitur/widget berkaitan dengan Label dan Categories.
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 anda bisa lihat disini.
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'> <b:if cond='data:title'> <h2 style='font-family:arial'> Article Categories </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:includable><b class='xbottom'><b class='xb4'/><b class='xb3'/><b class='xb2'/><b class='xb1'/></b> </div><!--end of xsnazzy--> </b:widget> </b:section> |
Keterangan:
a. Tulisan warna biru " Article Categories" 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...
Selamat mencoba....
Terimakasih sudah mengunjungi blog ini... :D
Facebook
