Membuat Tag Clouds cumulus beranimasi

Waktu dikost iseng browsing keblog temen2 blogger ternyata aku menemukan ilmu baru namanya tag cloud.Mungkin diantara kalian sudah ga asing lagi dengan nama tag cluds. Pokoknya keren banget dech tag berbentuk flash atau animasi.
Kemudian aq browsing mencari kesana kemari akhirnya aq menemukannya. Namanya adalah tag clouds cumulus ini merupakan bikinan dari nona bloger buster.
tanpa basa basi aq langsung menerapkan blogku ini sebagai kelinci percobaan dan hasilnya.......
Tara......... dapat anda lihat hasilnya diblog ini.
Mau mencoba....
Caranya cukup mudah kok....
  1. tentunya masuk ke account blogger anda
  2. kemudian pada kontrol panel masuk kebagian tata letak atau layout kemudian edit html dan pilih expand widget.(sebelumnya backup dulu template anda)
  3. untuk mempermudah pencarian klik tombol Ctrl + F pada keyboard anda dan masukkan kode dibawah ini
<b:section class='sidebar' id='sidebar' preferred='yes'>

setelah ketemu kemudian copypaste kode dibawah ini tepat dibawahnya.

<b:widget id='labelku' 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>
Selanjutnya klik tombol save dan refresh halaman depan anda.

NB: jika anda ingin merubah dimensi panjang dan lebar, besar font dan background, cari tag pada bagian ini kemudian diganti dengan yang anda inginkan.
  • Untuk menyesuaikan ukuran tersebut dengan desain blog anda silakan di edit pada bagian yang terlihat 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;)
  • jika ingin merubah background silakan edit pada bagian dibawah ini
so.addVariable("tcolor", "0x333333");

  • Jika ingin merubah besar huruf yang ditampilkan silakan edit pada bagian seperti dibawah ini
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>");

Selamat mencoba dan berkarya :)

Comments :

21 comments to “Membuat Tag Clouds cumulus beranimasi”
Eko Priyanto said...
on 

Mantap tutorialnya :D

wawunx said...
on 

terima kasih mas dag mo mampir :D

AstroDzgn said...
on 

keren sob . di coba yah . thanx .

wawunx said...
on 

silahkan dicoba mas astro

The bomberz said...
on 

mas wawunx,, cara bikin tag cumulus ntu gmna ceh???
koq g da kode ini nya ya di edit html sya???

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

ada nya mlah

b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'

terus pas di paste dibawah kode ntu,
mlah error????
gmna ya cara yg gmpangnya????

(sya sngaja g pke kurung lncip ngsih contoh html yg sya pnya,,, cZ g bisa klo pke kurung lancip)

:-?

bls k blog sya

adi-petreli.blogspot.com

thnx b4......

Pesulap said...
on 

:(|)

fajrin indriani rais said...
on 

sebelumnya makasih udah bagi2 tips...
ehm...aku udah mencoba membuat menu dropdown and berhasil, tapi aku masih bingung cara buat menambahkan menu buat artikel aku sendiri gimana ya???

mohon bantuannya, soalnya aku baru belajar buat blogspot nich,,,

thank you

fajrin indriani rais said...
on 

Eh,,,iya mau nanya 1 lagi nich
Gimana cara membuat menu yang ada dibawah header??? contohnya home,profile,news, dll

wawunx said...
on 

buat mas bomberz bisa memakai cara kedua
n bisa dibaca disini http://wawunx.blogspot.com/2009/02/alternatif-memasang-tag-clouds-fixed.html

wawunx said...
on 

home,profile,news, dll tu aq dapetin dari bawaan templatenya mbak fajrin jadi tinggal kita edit ja dikit2
terima kasih sudah mampir

arieZ said...
on 

Mas,Klo Lewat Blog Dtk bgmn y??http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif
http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif

Aorama said...
on 

haloowww... thanks ya atas infonya.. aku juga lagi iseng2 buat tutorial nih... eh nemu deh... aku dah copy... dan aku coba... tapi ternyata setelah diperhatikan... ada 1 label yang gak muncul di tag cloud dan 1 label itu random hilangnya bergantian dengan yang lain coba aja ketika kita refresh maka akan bergantian dengan label yang lain... dan jumlahnya selalu -1...

yono k_Leng said...
on 

mksih bnyak ni boss ats ilmunya...
btw, ane lagi coba2 pasang tag clouds dari n'te, tapi yang ane blom pham nma labelnya apa ci...???
minta bantuannya ya, ane baru banget ni bejar ngeblog......

Google Inspirasiku said...
on 

Terima kasih informasinya berguna untuk saya.

ezzuhadka said...
on 

thanks for the inform.....

newbie said...
on 

info nya oke gan:D ... jangan lupa mampir ke blog sederhana saya;)) htp://www.share-my-link.blogspot.com thnks sebelm nya :-*

Maya Safana said...
on 

aduh malah rusak semua....lol
apany ya yg salah Check ni blog gw Full Sofware

Andry said...
on 

Thanks Gan Udah Share ilmunya;)

Urang Sunda said...
on 

ID widget baru "< b > labelku < / b > " tak valid untuk tipe berikut: < b > Label < / b >
Error 500

info toko surya62 said...
on 

saya sudah buat oleh-oleh dari si gubhugreyot tapi kok gak jalan ya... Ini akan saya coba ya... makasih infonya

haviedzs said...
on 

alternatif lain yg lebih mudah http://myhavies.co.cc/2011/05/cara-membuat-label-cloud-di-blogger.html

Post a Comment

Artikel Terkait

 
Blogger Indonesia
eXTReMe Tracker

Followers