Membuat Tag Cloud Cumulus Pada Blog

Posted by Unknown on Saturday, November 28, 2009

Tips Membuat Tag Cloud Cumulus Pada Blog. Tag Cloud Cumulus adalah widget yang menampilkan Tag (label) dengan tampilan teks melayang-melayang dan berputar-putar seperti awan. Dengan tampilan seperti itu, label akan terlihat lebih “nyeni”. Jika tertarik, silakan ikuti tipsnya berikut ini bersama Tips Trik Blog berikut ini.

Pertama, login ke account blogger hingga masuk Dasbor >> Tata Letak >> Edit HTML

Kedua, jangan lupa untuk mencentangi “Expand Template Widget”.

Ketiga, kemudian temukan kode berikut ini.

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



Keempat, copy paste kode berikut ini.

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


Kelima, simpan template.

Setup default tag cloud cumulus dari kode di atas adalah sebagai berikut.
  • Lebar dan tinggi widget tersebut disetup masing-masing 240px dan 300px.
  • Warna background disetup dengan warna putih.
  • Warna Teks disetup dengan warna abu-abu (grey).
  • Ukuran font disetup sebesar “12”.

Kustomasi Tag Cloud Cumulus

1. Jika ingin melakukan kustomasi ukuran tinggi / lebar dan warna background, editlah pada kode berikut ini.

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.


2. Jika ingin melakukan kustomasi 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 kustomasi terhadap ukuran font, editlah pada bagian seperti di bawah 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>");


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

Catatan

Untuk dapat menampilkan Widget Tag Cloud Cumulus ini, kita harus menginstall Flash Player 7 ke atas.

Selamat Mencoba!!!
Description: Membuat Tag Cloud Cumulus Pada Blog Rating: 4.5 Reviewer: Unknown - ItemReviewed: Membuat Tag Cloud Cumulus Pada Blog

{ 0 comments... read them below or add one }

Post a Comment