Merubah Tampilan "Label" Seperti Awan Cumulus

Sewaktu saya blogwalking ke teman - teman, saya menemukan trik yang sangat menarik, yaitu merubah tampilan sidebar "Label" seperti awan cumulus. Tapi sayangnya trik ini tidak bisa di tampilkan pada blog saya, soalnya kode ini<b:section class='sidebar' id='sidebar' preferred='yes'>  tidak ada dalam kode HTML blog saya. Sekarang saya hanya memberikan triknya kepada sobat t'Bet untuk dapat memperindah blog anda.Trik ini sangat bermanfaat bagi anda yang  memunculkan label atau tag dari suatu artikel.

Cara untuk memasukkan label atau tag ini sangat mudah. Setiap selesai menulis artikel, jangan lupa untuk selalu mengisi kolom label yang sesuai dengan artikelnya, dengan begitu kata - kata yang ditulis pada kolom label pun akan muncul secara otomatis pada sidebar "Label"....
Jika kamu ingin merubah tampilan "Label" seperti Tag Cloud atau Awan Cumulus,maka ikuti langkah - langkah berikut :

1. Masuk ke menu "Layout" >> "Edit HTML"
2. Centang "Expand Widget Template"
3. Backup template menggunakan Notepad
4. Silahkan Kamu cari kode <b:section class='sidebar' id='sidebar' preferred='yes'> di template
5. Pindahkan atau Copy Paste-kan kode di bawah ini tepat setelah kode di atas

<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>

6. Jika selesai, Save Template

UNtuk melakukan pengeditan untuk mengatur tampilan label anda, maka anda dapat mengikuti langkah  berikut:

1. Jika ingin melakukan pengaturan ukuran tinggi / lebar dan warna background, editlah pada kode berikut ini, dan silahkan anda ganti dengan keinginan anda:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff"); 

Untuk merubah lebarnya, ubahlah angka 240 dengan lebar yang dikehendaki.
Untuk merubah tingginya, ubahlah angka 300 dengan tinggi yang dikehendaki. 
 Untuk mengganti warna teks silahkan anda ganti #ffffff

2. Jika ingin melakukan pengaturan terhadap warna teks, silakan edit pada bagian seperti di bawah ini. 

so.addVariable("tcolor", "0x333333");   

Untuk mengganti warna background, gantilah kode 333333 dengan kode warna yang lain.

3. Jika ingin melakukan pengaturan terhadap ukuran font, editlah pada bagian seperti di bawah ini.

so.addVariable("tagcloud", "");

Untuk merubah ukuran huruf, gantilah angka 12 dengan ukuran yang lain yang dikehendaki.

Artikel Terkait: