CARA MEMBUAT TAG CLOUD DI BLOG

Tag Cloud dapat bermanfaat untuk meningkatkan impressed page rank dari blog yang kita punya (katanya sih..). Trus apa lagi kegunaan Tag Cloud ini silakan baca postingan saya terdahulu tentang APA ITU TAG CLOUD ?.

Disini kita hanya membahas tentang bagaimana cara membuat tag cloud silakan ikuti langkah demi langkah.

Langkah pertama
1. Seperti biasa login dulu pada blogger account anda
2. Pada Dashboard pilih layout atau pengaturan
3. Kemudian pada Page Element tambahkan satu buah gadged
4. Kemudian pilih Label
5. Kalo sudah silakan simpan pekerjaan anda

Langkah kedua
Untuk keselamatan template anda, silakan backup dulu ke harddisk anda, supaya nantinya jika terjadi kesalahan semua data bisa dikembalikan lagi.
1. Klik Edit HTML kemudian jangan lupa untuk menandai Expand Widged Templates.
2. Lalu cari kode ini ]]></b:skin> lalu copykan kode dibawah ini tepat diatas kode ]]></b:skin> tersebut.


/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}


3. Kalau sudah copykan kode dibawah ini tepat dibawah kode ]]></b:skin>

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

4. Kalau sudah silakan simpan dulu pekerjaan anda.

Langkah Ketiga
Masih dalam Edit HTML silakan cari kode seperti dibawah ini

<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

kode diatas ada di bawah kode ini:
<b:widget id='Label1' locked='false' title='cloud' type='Label'>

Kemudian ganti semua kode dengan kode dibawah ini


<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(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Untuk ukuran, font, dan ukuran font silahkan utak-atik sendiri,ok!!!!

sumber: Cara membuat tag cloud