Cara Membuat Tag Cloud (Melayang-layang) di Blogspot
Kemarin malem, pas lagi nyari cara merubah label postingan tiba-tiba saya dihantarkan oleh Mbah Google ke sebuah blog yang membahas cara membuat tag Cloud atau tag yang melayang-layang seperti terlihat sebelah kanan blog saya.
Membuat tag seperti ini memang sebelumnya sudah sempet pengen, cuman ngga tau namanya. Jadinya ngga pernah sengaja nyari, eh kemaren karena ngga sengaja, pas Googling dapet dh nih tutorial.
Tanpa pikir panjang, langsung konsentrasi mengikuti tutorial di blog tersebut. Padahal awalnya ingin merubah label, tapi karena tutorial ini lebih menarik akhirnya langsung aja praktek. Cara membuat tag cloud di blogspot sangat mudah.
Berikut adalah caranya :
Tahap pertama :
- Sign in ke blogspot dengan username dan password anda.
- KLik layout.
- Klik Add gadget kemudian klik label
- Simpan dulu label tersebut di sidebar blog anda.
Tahap kedua :
- Masih di tab layout, Klik edit HTML
- Klik download full template agar ada back up tempalate jika terjadi kesalahan.
- Beri centang pada kotak expand widget tempaltes
- Kemudian cari kode di bawah ini dengan menekan ctrl+F di keyboard anda agar memudahkan pencarian.
<b:section class='sidebar' id='sidebar' preferred='yes'>
- Kemudian letakkan kode dibawah ini dibawah kode diatas tadi.
<b:widget id='Label99' 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 ("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "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>
- Klik Preview
- Lihat tampilan blog anda, apakah sudah berhasil atau belum. Jika belum jangan simpan dulu templatenya, perhatikan kembali langkah-langkah diatas. Mungkin anda salah meletakkan kodenya.
- Jika sudah berhasil jangan simpan terlebih dahulu jika tampilan tag cloud itu tidak sesuai dengan yang anda harapkan
Berikut adalah cara mengedit tag cloud tersebut ( ingat, jangan save dulu templatenya )
- untuk mengubah ukuran tag cluod perhatikan kode dibawah ini
var so=new SWFObject ("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300",
- Ubahlah angka 240 dan 300 itu sesuai dengan keinginan anda. Angka 240 menunjukkan lebar, sedangkan angka 300 menunjukkan tinggi tag cloud tersebut.
- Untuk mengubah kecepatan putaran tag perhatikan kode berikut ini
so.addVariable("tspeed", "100");
- Ubahlah angka 100 tersebut dengan yang anda inginkan, semakin besar angkanya semakin cepat putaran tag cloudnya
- Jika tampilan tag cloud sudah sesuai dengan keinginan anda barulah save template anda.
- Mengapa save template dilakukan paling akhir, karena kode untuk tag cloud itu akan hilang setelah di save, sehingga kalau tampilan tag cloudnya belum sesuai dengan keinginan kita sulit untuk mengeditnya..
- Semoga tutorial ngeblog ini bermanfaat. selamat mencoba. Kalau ada yang belum berhasil bisa menghubungi lewat form komentar.
terima kasih..untuk seorang blogger disana.
Postingan
Halo um! lagi blajar bikin blog nih! Jangan diktawain ya :D Salam kenal. Trim's Trik2nya lumayan bagus2!
wah sama dunk..kita juga lagi blajar juga. exchange elmu ya..hehe thank's dah mampir
Thanks bro...blogku jadi tambah cantik nih
tengkyu juga gan dah mampir..sukses ya :-)
sob kalau kodenya nga ketemu gimana?
di template saya nga ada kode ini
terima kasih tipsnya
terimakasih mas..muter2 cari namanya akhir nya ketemu juga dsni....
Maturnuwun gan langsung test
untuk agan2 diatas klo kode javascriptnya ngga bisa, itu karena javascriptnya kemungkinan udah diremove sama yang empunya.
Posting Komentar
Kasih komentar yaa.. Kan bisa saling berbagi jadinya. makasih..!! :-)