abdulroqib.blogspot.com

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