Memasang Label Animasi atau Tag Cloud pada Blogger

Posted by Herman on Friday, March 06, 2009 33 comments

label animasiKetika 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(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;180&quot;, &quot;180&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>
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:

33 comments

Si Kucel said... 06 March, 2009
info yang bagus mas ....

makasih ya mas hehehe
Andy J. Santiko said... 07 March, 2009
he..he.. lama kucari bro.. btw, kok gak dipasang di hermanblog ?
herman said... 07 March, 2009
andy: krn loadingnya lbh lama dibandingkan label standar dan aq lbh suka yang simple tapi useful. :)
Mr. Indra 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. :)
Mr. Indra 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!
Riz@l 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:
Bluescreen said... 26 October, 2009
Ini nih yang lagi di cari

thanks Sob , udah berbagi
Fajar three amstrong 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
Lina Marliana 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
baca dan mengertilah 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.
Roki Ganteng 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...
nunenna's blog 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
(: ^_^ FaNoRaMa ^_^ :) said... 03 January, 2012
Standard aja lah :D
WHB said... 17 March, 2012
Utak atik :)]
Surya Jahan said... 16 September, 2012
makasih atas infonya ya, gan.

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

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment