Cara Membuat Tag Cumulus di Blogger

Posted by Abdul Roqib | Monday, December 14, 2009 11 comments
Cara Membuat Tag Cumulus di Blogger. Sedikit melirik posting blog cahaya biru cara membuta tag cumulus di blogger aku tertarik mempostingnya kembali untuk sekedar sharing, hehe.. tag clouds culumus ini berbeda dengan tag-tag lain, perbedaan yang mencoloi adalah tulisannya bisa berputar-putar. Dengan sedikit penjelasan yuk kita langsung bahas cara membuat tag culumus di blogger.

Langkah-langkahnya membuat tag clouds culumus di blogger adalah :
1. Masuk ke Blogger
2. Pilih Tab Layout
3. klik Edit HTML
4. Pilih Expand Widget Template

Menaruh kode CSS Bingkai Rounded (tanpa gambar)
1. Copy kode CSS dibawah ini:

<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 :
Plis, lihat tulisan yang kedap-kedip itu.
a. tulisan ungu #FFFFFF = warna background dari Bingkai
b. tulisan biru #0066FF = warna garis tepi dari Bingkai
Anda bisa merubah kode itu dengan kode warna sesuai selera anda.
2. Taruh kode tersebut di atas kode </head>
3. Save Template-mu

Menaruh Kode HTML Bingkai dan Tag Cumulus
1. Cari kode HTML yang menunjuk pada 'id' atau 'class' dari area Sidebar Blog anda...

kode HTML sidebar tergantung dari jenis template anda. Ini bisa bervariasi. Misalnya: pada blog saya adalah id=sidebar-wrapper.

Tapi, dalam blog anda mungkin bisa lain. Misalnya: Mungkin juga, id='sidebar' ; id='column02' ; dan sebagainya.
2. Kemudian, copy kode 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://abdulroqib.blogspot.com'>belajar seo blogspot</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", "0x333333");
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 merah 'Article Categories' adalah title dari Widget. Anda bisa merubah sekehendak anda. Misalnya: kategori artikel, Grup Artikel, dan sebagainya.

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

c. Tulisan warna biru adalah kode-kode yang berhubungan dengan Widget.
1. Angka 330 (tanpa px) = lebar pixel widget
2. Angka 200 (tanpa px) = tinggi pixel widget 333333 (tanpa #) = kode warna dari Tulisan
3. #ffffff = kode warna dari Background Widget
4. Angka 12 = ukuran font dari widget
5. Taruh kode tersebut, di manapun anda suka. (saya sarankan dalam area sidebar yaa...)
6. Save Template-mu

Tutorial blogger kali ini cara membuat tag clouds culumus di blogger sedikit copas, hehe.. jangan lupa lo.. mampir lagi di blog belajar seo blogspot ini ya..
Selamat mencoba……..

11 comments: to "Cara Membuat Tag Cumulus di Blogger"

Semayang Boy said...

thanks...keren banget....

Bajang Bali-cinta Indonesia said...

infonya keren :) eh jgn lupa follow blogq y http://mudaers-cintaIndonesia.blogspot.com/

Festival Museum Nusantara said...

makasih banget tutorialnya

cahijo said...

mantap gan

bisnis hosting said...

mantep infonya, tengkyu

Pendi Ari Wibowo said...

banyak amat y langkah-langkanya.. jd bingung....

Inilah Alasan Kenapa Anda Harus Bergabung dengan Oriflame said...

Wah keren sob..thank banget nih buat para Blogspoter

budak musik said...

keren juga yaw
tagnya bs muter2 kayak bola:))

xamthone obat herbal anti kanker said...

siip deh mau juga nyoba,,moga lancar dan berhasil makasih dan sukses slalu,,,

obat tradisional mengobati jerawat said...

keep blogging moga jadi ilmu yang berguna,,

Mercedes-Benz Mobil Mewah Terbaik Indonesia said...

ribet kayaknya ya T_T

Post a Comment

What's your comment about Cara Membuat Tag Cumulus di Blogger, type in the comment form below. Please Don't Spam.!!!