Memasang Label Animasi atau Tag Cloud pada Blogger

Ketika melakukan blogwalking, saya menemukan sebuah widget yang cukup menarik yaitu label animasi atau disebut dengan tag cloud. Label animasi ini mempunyai tampilan yang sangat menarik karena ketika kursor mouse disorot ke area tag cloud tersebut maka labelnya akan berotasi seperti orbit. Sehingga membuat blog kita terasa lebih interaktif.

Label animasi ini mempunyai fungsi yang sama dengan label standar dimana setiap kali kita memberi label pada postingan maka label tersebut secara otomatis akan muncul pada area tag cloud.

Nah bagi anda yang tertarik dengan label animasi ini. Berikut cara pemasangannya:

1. Seperti biasa. Login ke Blogger

2. Klik Download Full Template untuk membackup template anda

3. Setelah itu klik Design -> Edit HTML

4. Cari kode <b:section class='sidebar' id='sidebar' preferred='yes'>

5. Kalau sudah ketemu letakkan kode berikut 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://www.hermanblog.com'>Herman Blog</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "180", "180", "7", "#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'/>
</div>
</b:includable>
</b:widget>

Angka 180 menunjukkan panjang tag cloud dan angka 180 menunjukkan tinggi tag cloud. Silahkan diganti nilainya sesuai dengan ukuran sidebar template anda.

Sedangkan kode ffffff menunjukkan warna background dari tag clound. Angka 333333 menunjukkan warna teks dan angka 12 menunjukkan ukuran teks. Silahkan diganti sesuai keinginan.

6. Jika sudah, Klik Save Template. Selesai

Selamat mencoba.

Recent Posts:

Sudah gabung dengan sumber dolar berikut ini?

Dapat dolar hanya dengan menulis review di blog (syarat: PR min 2)

Dapat dolar hanya dengan memasang link di blog (syarat: PR min 3)

Custom URL gratis + dapat dolar setiap URL anda diklik

33 comments

Helmy said... 06 March, 2009: info yang bagus mas ....

makasih ya mas hehehe
Unknown said... 07 March, 2009: he..he.. lama kucari bro.. btw, kok gak dipasang di hermanblog ?
Anonymous said... 07 March, 2009: andy: krn loadingnya lbh lama dibandingkan label standar dan aq lbh suka yang simple tapi useful. :)
Ai said... 24 March, 2009: good good thank bagus mksh ya ...eh mau nanya nie kok punya mas emoticon komentarnya bisa muncul ya?? knp pnya sy gak bisa ya kasih tau tow mas plisss ....:(
Herman said... 25 March, 2009: @mr indra: memank ga smua template bs karena kodenya berbeda2. contohnya template blog ini awalnya jg ga bs tetapi stlah diutak-atik jd bs :D.

alamat emailnya apa mas ntar sy kirim caranya lwt email aja karena kodenya panjang bgt. :)
Ai said... 25 March, 2009: Muh.indra_indra@yahoo.com :D
Anonymous said... 26 April, 2009: Maaf bos aq newbe banget biar muncul kode di atas itu gimana bos HOME, PAYPAL, CONTACT ME. N BLOGROOL! Please bos!
Unknown said... 04 May, 2009: mas kalo pake template klasik gimana, saja udah coba tapi malah berantakan :P
Remba said... 21 August, 2009: ………………….._,,-~’’’¯¯¯’’~-,,
………………..,-‘’ ; ; ;_,,---,,_ ; ;’’-,…………………………….._,,,---,,_
……………….,’ ; ; ;,-‘ , , , , , ‘-, ; ;’-,,,,---~~’’’’’’~--,,,_…..,,-~’’ ; ; ; ;__;’-,
……………….| ; ; ;,’ , , , _,,-~’’ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ¯’’~’-,,_ ,,-~’’ , , ‘, ;’,
……………….’, ; ; ‘-, ,-~’’ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;’’-, , , , , ,’ ; |
…………………’, ; ;,’’ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;’-, , ,-‘ ;,-‘
………………….,’-‘ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;’’-‘ ;,,-‘
………………..,’ ; ; ; ; ; ; ; ; ; ; ; ;__ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ‘-,’
………………,-‘ ; ; ; ; ; ; ; ; ; ;,-‘’¯: : ’’-, ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; _ ; ; ; ; ;’,
……………..,’ ; ; ; ; ; ; ; ; ; ; ;| : : : : : ; ; ; ; ; ; ; ; ; ; ; ; ; ,-‘’¯: ¯’’-, ; ; ;’,
…………….,’ ; ; ; ; ; ; ; ; ; ; ; ‘-,_: : _,-‘ ; ; ; ; ; ; ; ; ; ; ; ; | : : : : : ; ; ; .|
……………,’ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ¯¯ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;’-,,_ : :,-‘ ; ; ;|
…………..,-‘ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ,,-~’’ , , , , ,,,-~~-, , , , _ ; ; ;¯; ; ; ; ; ;|
..…………,-‘ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;,’ , , , , , , ,( : : : : , , , ,’’-, ; ; ; ; ; ; ; ;|
……….,-‘ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;’, , , , , , , , ,’~---~’’ , , , , , ,’ ; ; ; ; ; ; ; ;’,
…….,-‘’ ; _, ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ‘’~-,,,,--~~’’’¯’’’~-,,_ , ,_,-‘ ; ; ; ; ; ; ; ; ; ‘,
….,-‘’-~’’,-‘ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; | ; ; | . . . . . . ,’; ,’’¯ ; ; ; ; ; ; ; ; ; ,_ ; ‘-,
……….,’ ; ;,-, ; ;, ; ; ;, ; ; ; ; ; ; ; ; ; ; ‘, ; ;’, . . . . THAT'S JUST WRONG---‘’’
………,’-~’ ,-‘-~’’ ‘, ,-‘ ‘, ,,- ; ; ; ; ; ; ; ; ‘, ; ; ‘~-,,,-‘’ ; ,’ ; ; ; ; ‘, ;,-‘’ ; ‘, ,-‘,
……….,-‘’ ; ; ; ; ; ‘’ ; ; ;’’ ; ; ; ; ; ; ; ; ; ; ‘’-,,_ ; ; ; _,-‘ ; ; ; ; ; ;’-‘’ ; ; ; ‘’ ; ;’-,
……..,-‘ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;¯¯’’¯ ; ; ; ; ; ; ; ; , ; ; ; ; ; ; ; ; ;’’-,
……,-‘ ; ; ; ; ; ; ; ,, ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; |, ; ; ; ; ; ; ; ; ; ; ‘-,
…..,’ ; ; ; ; ; ; ; ;,’ ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;|..’-,_ ; ; ; , ; ; ; ; ; ‘,
webblogers said... 26 August, 2009: thanks... ini sangat membantu :)
BangLeo said... 02 October, 2009: mas, pnyq gagal ya? yg klwr cuma putih duank...
hubungi di anakjigong.blogspot.com
kadachi said... 12 October, 2009: berkunjung ke blog yang keren abiz.... :drool::drool:
Unknown said... 26 October, 2009: Ini nih yang lagi di cari

thanks Sob , udah berbagi
Anonymous said... 25 November, 2009: assalamualaikum,,salam knl pak.saya mau nanya,stlh saya prakekkan pertamanya bisa.tp stlh saya menambah label baru di postingan,kok ga nongol ya ...
jawabannya di tunggu ya pak.terima kasih
Unknown said... 09 December, 2009: Mas Herman, thanks infonya.. Aku copas nih scriptnya.. Tp Labelku yg semula jumlahnya 7 kok cuman muncul 6 yah mas ? Label "celoteh" ga muncul.. Gmn nih mas ?? ditunggu infonya.. Thanks
Puwnod said... 15 December, 2009: wewe :))
luthfi117 said... 05 March, 2010: wah,,,tnx ya...
www.luth-fi.co.cc
apri g.p.s said... 18 March, 2010: label aku kok gak muncul balas donk
otomotifotosport said... 25 March, 2010: udh gabisa ya mas?
pahrur said... 27 March, 2010: salam jenak mas

sebelum x aku minta maaf kalo aku langsung nyolonong pertanyaan.

mas. kok punya ku ngak bisa muncul animasinya.padahal udah berulang-ulang aku copy paste
tetap aja ngak bs!!
mohon dong bantuannya?
ibnu kundari said... 18 April, 2010: Mas Mohon Copas Artikel Ya...
makasih.
Anonymous said... 21 June, 2010: berhasil berhasil oye. :D
Fariidha Bieber said... 27 February, 2011: akk engga ngerti :(
한수별… said... 29 April, 2011: kok saya ga nemu..sidebar ya?...cma header,tabs,main,id..tolong bimbingannya.. :
Pratama Computer said... 27 June, 2011: makasih tipsnya mas...coba dulu deh...
Nena Fatimah said... 05 September, 2011: koq ga bisa.. :(
ibu said... 26 September, 2011: mantep banget barusan coba bro, slam kenal
Syaputra Hrp said... 13 November, 2011: thx ya bro =))
Syaputra Hrp said... 13 November, 2011: tuker link yok

syaputrablog.blogspot.com :X ;))
Belajar Sistem Informasi said... 26 November, 2011: Bagus mas artikel nya,tp sayang saya g' temu-in kode :.terima kasih
Irvan said... 03 January, 2012: Standard aja lah :D
WHB said... 17 March, 2012: Utak atik :)]
Unknown said... 16 September, 2012: makasih atas infonya ya, gan.

jangan lupa mampir ke..
suryajahan.blogspot.com ;)