Cara memasang Tag Cloud animasi

Senin, 06 Juli 2009

Apakah anda pernah melihat widget tag cloud seperti gambar disamping ini?. Widget tag cloud ini terkesan lebih elegan karena menyajikan animasi gerak jika cursor diarahkan ke widget tersebut. Selama ini mungkin anda hanya mengenal tag cloud standar dengan kata kunci yang hanya berbeda pada besaran hurufnya saja. Nah, bagi anda yang senang mengutak-atik blog, tutorial yang satu ini patut untuk anda coba. Ok, mari kita mulai saja dengan cara yang sederhana. Langkah awal, silahkan anda login dan masuk ke account blogger anda dan arahkan ke layout > edit HTML (jangan lupa untuk untuk download full template anda untuk backup jika sesuatu yang tidak diinginkan terjadi).

Langkah selanjutnya, silahkan cari kode di bawah ini :

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

kalau sudah ketemu, silahkan letakkan kode dibawah ini tepat dibawah kode yang diatas :

<b:widget id='Label88' locked='false' title='Tag Cloud' 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://hermanblogtips.blogspot.com'>Herman Blog</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;200&quot;, &quot;150&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='14'><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>

Selesai, jangan lupa simpan template anda.

Catatan : silahkan atur angka 200 yang menunjukkan lebar dan angka 150 yang menunjukkan tingginya. Ganti nilainya sesuai dengan ukuran sidebar template anda. Sedangkan kode huruf ffffff menunjukkan warna background dan angka 333333 menunjukkan warna teks serta angka 14 menunjukkan ukuran teks. Silahkan diganti sesuka hati sesuai selera anda.

21 komentar:

Iwan mengatakan...

Mas herdiansyah, terima kasih tipsnya. Ini sangat berguna bagi saya mengingat saya adalah blogger pemula yang butuh belajar banyak. ditunggu tips-tips selanjutnya.

share about blogging mengatakan...

wah..posting yang menarik mas..langsuk saya pasang di blog saya ya mas...salam kenal mas

nalvian mengatakan...

mas saya udah coba tp blm muncul tag cloudnya

Herdiansyah Hamzah mengatakan...

@ Nalvian : Coba pasang dulu tag cloud bawaan blogger terlebih dahulu. setelah itu ikuti petunjuk di atas. Semoga berhasil...

Herdiansyah Hamzah mengatakan...

@ Share about blogging : Salam kenal balik mas. trims dah mampir ya...

yans"dalamjeda" mengatakan...

Matur Nuwun
Beressss...!!!!
Goooood.......!!! tks.

Herdiansyah Hamzah mengatakan...

Trims dah mampir ya. Salam kenal balik....

cewek cantik mengatakan...

hebat...mudah ternyata aplikasinya...tanks

Nouval mengatakan...

OK... tak cobain Mas

.::PRIVACY::. mengatakan...

nah bro di templates gw ga ada code nya
jd bingung mau letakin dmn,
ada solusi lain ga bro.

Thx's

Anonim mengatakan...

makasih atas infonya mas.....www.andiblogger.co.cc

Mbah Kuncen - BisnisTuyul.com mengatakan...

Info yang mantap, Mas. Hebat lagi, saya nemu di google dengan keyword cloud tag. Btw, saya dah follow nich blognya. Ditunggu follow baliknya, ya...

Salam YAKIN SUKSES !!!

Ediwan Sigit mengatakan...

Sip...ana coba ya!!

Herdiansyah Hamzah mengatakan...

@Privacy : Waktu mencari kodenya, di expand template widget ngk sob?
@Andi : sama2 sob....
@Mbah Kuncen : sudah sy follow balik mbah!he...3x.
@Ediwan Sigit : Monggo mas....

trik & cara ngeblog di blogspot mengatakan...

kynya kurang sempurna tuh omm
masa g ada keterangan buat ganti urlnya ya..
kaisan tuh buat para newbie.pasang tegcould dr sini
url nya g di ganti..sma az boong..

Dimas Adhitya mengatakan...

aduh , ngga bisa nih X.x

je-blogs mengatakan...

tak coba dulu sob..
semoga bisa yaa.
sebelumnya terima kasih, salam kenal

munjul community mengatakan...

koq ga nongol yuaaa

sholeh mengatakan...

thank's infonya...

Ivan Ngapak mengatakan...

Nice post brow.. kalo untuk wordpress bisa dibaca caranya disini
salam kenal untuk man hamzah

adi bowo mengatakan...

keren bozz tuorialnya

Posting Komentar

Terima kasih telah menyempatkan waktu untuk berkunjung di BLOG saya yang katro ini. Biasakanlah berkomentar setelah Anda membaca artikel. But No Spam, No Porn....OK Bro!!!