Sudah berlangganan artikel blog ini via RSS Feed?

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'&gt;
<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 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 " 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

Powered by  MyPagerank.Net

37 komentar:

Sintia mengatakan...

pusing...... pusing..........:-L
gimana sich ini....

bisnisway mengatakan...

ini ini ini *lompat lompat* dicoba ah suatu waktu, kalo kerjaan ud ga numpuk lagi... makasih banget ya infonya....

bisnisway mengatakan...

oia lupa nanya: bikin waktu loading blog lebih berat ga?

Putroweb mengatakan...

ia bikin berat... tapi g berat baget beda sama flash.

irvandy januar mengatakan...

wew. pucinx..

vandy

putro mengatakan...

@ irvandy januar : berusaha... :)

Ahmad Ramadani mengatakan...

Infe yang bagus Bos...
Tapi belum gue coba sih,,,,

Ntar aja....!!

yang gue lihat mengatakan...

mav ni mo tny masukin tulisan ke tag cloud'y gmn y???

putro mengatakan...

@ Ahmad Ramadani : makasih dah berkuinjung :D

@ yang gue lihat : masukin aja di gadgetnya...

Pakar Tutor Blog mengatakan...

Saya ada cara lain klik http://pakartutordesignblog.blogspot.com/2009/08/cara-membuat-label-berputar-putar-atau.html

PUGUH mengatakan...

Makasih infonya.Bermanfaat banget buat saya.Salam bergogling ria.

ezzuhadka mengatakan...

awalnya sih ..pusing, selanjutnya bikin ketagihan bozz....So much thanx's

Orang Tembilahan Asli mengatakan...

kalo udah jadi, ntar posisinya diblog kita dimana. apa bisa kita atur sesuai keinginan kita. tolong pencerahan..

asirawan bocka mengatakan...

kasian deh loh ....
bisa posting aja tapi label nya sendiri gak berputar-putar .....kwkwkwkwkwkwkwkwk

hohohohohohoooo
hikhihkihkihihkhihkk

ERDIANA mengatakan...

wah dah aq coba ko te2p gk jdi yah??

kepri job mengatakan...

saya udah pasang di http://job2kepri.blogspot.com/
apa benar spt itu gan.?
tolong comentnya.
:D

marketivashare mengatakan...

benar-benar berputar kepalaku

boxsoffice mengatakan...

thanks atas infonya,,, Berkunjung balik ya Download Film Gratis | High Quality - Boxsoffice

Anonim mengatakan...

penipu loe, .....

Muhammad Hauzan mengatakan...

oh, tidak. widgetnya rusak. tolong diperbaiki yah! :)

Wi mengatakan...

ra iso

Septiaji Agung Santosa mengatakan...

NICE SHARE, BERGUNA BANGET SOB

Yan Chriestiano mengatakan...

Yang berputar kepala ku neh,

Ga bisa om

punk_chill_acuy mengatakan...

mntp...
sesama bloger follow my blog..

http://punkchillcommunity.blogspot.com/

Afsyanah Asfa mengatakan...

ngopi dari sini ya mas

http://analisis-fiqih.blogspot.com/2009/01/membuat-tag-cumulus-di-blogger_22.html

Bondowoso Cyber mengatakan...

kunjungi juga ya di www.beralih.blogspot.com

Bukan Blog Biasa mengatakan...

insya allah membantu (y) thnks

Muhammad Irvan Avib Azizi mengatakan...

terimaksih gan..
salam kenal :)

Erwin Davincy Sihombing mengatakan...

kog gk bisa2 juga sihhhhhhhhhhhh

toko bunga gombong mengatakan...

kalau bisa dikasih live previewnya.....

Grosir sprei Murah mengatakan...

artikel yang menarik

kunjungi blog mengatakan...

terimakasih ya atas info-infonya, sangat bermanfaat buat saya, blog ini sangat bagus....

hotbis, klik disini mengatakan...

pusing juga bacanya.

download proposal ptk paud mengatakan...

Matur suwun pencerahannya. Semoga sukse dengan blognya

bisnis sampingan mengatakan...

okkke gan..seepp
lanjutkan infonya gan

tips menghadapi masalah mengatakan...

artikel cara membuat labelnya sangat bermanfaat, terimakasih ya

Vimax Original Pembesar Mr.P Herbal mengatakan...

artikelnya sangat membantu thanks for sharing
kunjungi web kami gan => www.vimaxkapsuloriginal.com

Posting Komentar


 

My Friends Google

My Profile

cojogja Blog ini saya buat, untuk berbagi informasi kepada teman - teman, dan sebagai rangkuman untuk diri saya sendiri. ( Semoga gak bosen Dengan Blog Saya... :D )