Satu lagi sobat bagi para pecinta blog yang senang menghiasi blog mereka sehingga tampil lebih cantik dan menarik. Kali ini kitra akan membuat label cloud berputar. Modifikasi label ini sangatlah menawan banyak sekali blogger untuk memasangnya di blog mereka, tak terkecuali saya sendiri. Memang dengan modifikasi label ini blog kita terlihat lebih elegan dan profesional sobat. Gak usah berlama-lama saya berboicara di sini ya. Langsung saja kita praktekin caranya ya.
Cara Membuat Tag Cloud Comulus [Label Berputar] :
1. Login ke dashboard
Pilih Tata Letak -> Edit Html ( Catatan : Di simpan dulu templatenya ya sobat sebelum memulai cara ini )
2. Cari kode di bawah ini sobat :
Ini khusus blog yang menggunakan template designer
<b:section class='sidebar' id='sidebar' preferred='yes'>
Untuk yang menggunakan template bawaan blogger cari kode di bawah ini :
<b:section-contents id='sidebar-right-1'>
3. Masukkan kode di bawah ini di bawahnya kode-kode di atas tadi sobat :
<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://sites.google.com/site/bloggerustemplatus/code/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://sites.google.com/site/bloggerustemplatus/code/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>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/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://sites.google.com/site/bloggerustemplatus/code/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>
4. Sebelum di simpan coba di preview dulu sobat apakah label ini bekerja dengan baik apa tidak.
5. Kalu yakin sudah bekerja dengan baik simpan sobat ya. maka hasilnya akan seperti punya saya sobat.
Catatan :
Jika di blog tempat memasang tag cloud dan tag daftar/text, biasanya tag cloudnya belum muncul.Jika tag cloudnya belum muncul coba di setting manual widget label yang ada di sidebar blog. Pilih option Cloud.
Jika ingin mengubah warnanya anda bisa coba ganti beberapa variabelnya
tagcloud", "240", "300", "7", "#ffffff" ->
a. 240 adalah lebar widget , 300 tinggi widget (angka 240 dan 300 bisa anda ganti sesuai lebar widget anda agar lebih rapi),
b. #ffffff adalah warna background, warna backgroundnya bisa anda ganti dengan warna lain , bisa dilihat disini DAFTAR WARNA html
c. so.addVariable("tcolor", "0x333333"); dimana , 0x333333 warna teks hitam. warna teks lain yang bisa anda gunakan.
d. Untuk angka 12 di atas adalah untuk mengatur besar kecilnya font.
e. Jika kode swf yang saya tandai berwarna pink tidak bisa bekerja secara baik, coba ganti dengan kode swf berikut ini : http://www.swfcabin.com/swf-files/1275932799.swf
Selamat mencoba dan sukse sobat ya
Tidak ada komentar:
Posting Komentar