Beberapa waktu yang lalu Saya mendapat request dari salah satu sobat blogger untuk posting artikel cara membuat tag cloud. Nah pada versi kali ini, saya akan sharing tag cloud ber-animasi.
Apa sih tag cloud itu? Tag cloud atau disebut juga label cloud merupakan daftar semua label yang digunakan untuk menandai suatu artikel. Label/category postingannya berbentuk seperti awan, bentuknya acak. Dari gambar di samping sobat pasti sudah dapat menebak apa itu tag cloud.
Jika sobat tertarik seperti widget di sidebar saya ini, maka ikuti langkah berikut ini:
1. Login ke akun blogger sobat.
2. Masuk ke Rancangan > Edit HTML.
(Sebelumnya lakukan back-up templates untuk berjaga-jaga.)
3. Copy script di bawah ini:
<b:widget id='Label99' 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://daw-xp.googlecode.com/files/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Codec by <a href='http://daw-xp.blogspot.com/'>DAW-XP</a></div>
<script type='text/javascript'>
var so = new SWFObject("https://sites.google.com/site/dawxpblog/home/tagcloud.swf", "tagcloud", "200", "150", "7", "#000000");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0xffffff");
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>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://daw-xp.googlecode.com/files/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Codec by <a href='http://daw-xp.blogspot.com/'>DAW-XP</a></div>
<script type='text/javascript'>
var so = new SWFObject("https://sites.google.com/site/dawxpblog/home/tagcloud.swf", "tagcloud", "200", "150", "7", "#000000");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0xffffff");
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>
Keterangan:
» Lebar widget : 200px
» Tinggi widget : 150px
» Warna latar (background) : abu gelap atau #000000
» Warna huruf : putih atau 0xffffff
» Tinggi widget : 150px
» Warna latar (background) : abu gelap atau #000000
» Warna huruf : putih atau 0xffffff
4. Letakkan script di atas di bawah kode:
<b:section class='sidebar' id='sidebar' preferred='yes'>(Gunakan Control + F untuk memudahkan pencarian, bisa dengan kata kunci id='sidebar')
5. Simpan templates sobat, dan lihat hasilnya ..
Sobat bisa mengubah letak dari widget tag cloud sobat di elemen laman.
Selamat Mencoba ..
21 comments
keren bro..langsung praktek langsung jadi...tq
Reply@myone1way
ReplyOK Bro, jangan lupa berkunjung setiap hari. Dapatkan artikel terbaru setiap harinya.
dah saya dah pasang linknya mas, thanks atas kunjungannya..link bisa di liat di "kawan ngeblog...!" ...salam persahabatan.
Reply@Surya Post
ReplyOK sobat. Makasih atas koment dan tukar linknya. Salam Persahabatan !
wah, hari ini g updated postingan nich
Reply@myone1way
ReplyUpdate kok sob, ada 3 artikel hari ini kiranya yang di update.
gan kok ana coba tag clud nya g berfungsi gan.,,.kosong tuh hitam gitu g ada tulisannya,.,.ada cara alter
Reply@Anonim
ReplySudah saya edit kembali kodenya. Mohon dicoba kembali.
makasih gan... numpang sedot ya,, ntr sumber ane tancap... ^_^
Replysiiipp nice post...
Reply@Robertus 'Ngormel' Fabumasse : OK, silahkan mas. Makasih dah berkunjung :D
Replysob tapi punyaku ngga ada gmna nie???? bisa ngga??? di tunggu di www.campurans.co.cc
Reply@aluwy chelung : Maksudnya nda bisa gimana? Ada gambar errornya ga? Gimana ga keliatannya gitu. :)
Replygan kenapa cuma item doang yang keluar???
Replyjadi mau coba aah,moga-moga bisa maklum gaptek,,salam love,peace and gaul,
Reply@Dewantara : maksudnya item kayak gimana sob?
Reply@saryadinilan : ok sob, silahkan dicoba. Salam love, peace dan gaul juga. :)
Thx bgt nie.. !
Replythanks for ur share
ReplyWah ini blognya keren punya. Semua yang saya cari ada disini nih. Thanks master
ReplyTq Gan..Mansabbb Gan..
Replykeren , numpang copas script nya , hehe
ReplyPost a Comment
Silahkan Anda kritik dan sarannya pada kolom komentar di bawah ini. Karena setiap satu kata Anda berkomentar sangat berarti untuk kemajuan blog ini (baca: Cara Berkomentar yang Baik).