Tips Blog : Membuat Tag Cloud Cumulus Blogger


Akhirnya kesampaian juga keinginan saya untuk mengganti tampilan label menjadi lebih yahud. Saya tertarik mengubah tampilan label blog menjadi lebih dinamis, bergerak menyesuaikan dengan gerakan kursor mouse ketika diarahkan ke space label tersebut. Dalam dunia blogging, label yang seperti itu biasa disebut Tag Cloud Cumulus atau Blogumus. Dengan menggunakan tampilan ini, blog anda akan terlihat lebih dinamis dan tidak kaku. Anda tertarik untuk mencobanya? Silahkan ikuti langkah-langkah berikut :

Langkah Pertama :

Copy script berikut (hati-hati jangan sampai ada yang tertinggal)

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<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></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Langkah Kedua :


Login ke account Blogger anda, terus edit Layout kemudian edit HTML.

Lagkah Ketiga :

Download dulu template blog anda sebelum memasukkan script (mengantisipasi adanya kekeliruan)
setelah dowload complete, kembali masuk ke halaman edit HTML. Kemudian centang expand widget templates

Langkah Keempat:

Cari tag dibawah ini (gampangnya pencet Ctrl F, lalu isi tag dibawah ini pada kotak pencarian)
<b:section class='sidebar' id='sidebar' preferred='yes'>

Langkah Kelima :

Kalau nggak ketemu tag tersebut, coba hilangkan dikit-dikit dari bagian akhir. Kalau sudah ketemu, tinggal paste kode pada langkah pertama tepat dibawah kode ini

<b:section class='sidebar' id='sidebar' preferred='yes'>




Finish. Simpan template dan langsung aja cek tampilan Blog anda. Apabila anda kurang puas karena sizenya terlalu besar atau terlalu kecil, anda bisa melakukan sedikit modifikasi. Begini caranya :

Cari tag dibawah ini :
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);

Angka 240 menunjukkan lebar dan angka 300 adalah tingginya dan #ffffff adalah warna background. Anda bisa menggantinya sesuka hati menyesuaikan dengan template yang anda gunakan.

{ 12 komentar... Views All / Send Comment! }

agung said...

bimbing qu yaw coz bru belajar blog.......hehe

mascipul said...

sama-sama sob, kita belajar bareng-bareng...

Yudan Fahmie said...

http://bagoevix.blogspot.com

tinggalkan sebuah comment...

trik & cara ngeblog di blogspot said...

kebiasan bloger sllu saya patuhi..

reniviciously said...

wah tips nya membantu sekali om :D

Aryes Novianto said...

wah bisa saya coba mas.maklumlah baru belajar juga,he2.thank artikelnya.salam kenal

Faril said...

ada yang nggak perlu ngedit html template??

cuma bikin di add html code/javascript aja??
makasih...

Download Ebook Gratis | cara-blog | kumpulan bisnis online said...

mantab dan bagus banget nich blognya, kunjungan balik ya bro di download ebook gratis =p

asih puspa hati said...

ko ga bisa ya..
>_<

AgielWeb said...

ah..ribet ah...ni pake script gue aja..
dijamin tokcer..
http://www.agielweb.info/2010/08/membuat-tag-cloud-3d-untuk-blogger-baru.html

om onny said...

wah ternyta caranya cukup simple. thanks

a.ir.l.an.g.ga said...

http://alivesolo.blogspot.com

Post a Comment

Silahkan berkomentar, komentar Anda sangat kami hargai