Membuat Label Menjadi lebih Cantik.

D i Blogger Hack kali ini kita akan membuat label kita lebih cantik, yaitu dengan Tag Cloud 3D dan Label Cloud, sehingga label kita akan lebih menarik!Ikuti terus! Membuat Tag Cloud

Tag Cloud adalah Label yang formatnya .swf, atau Flash, dengan 3D dan bisa diputar-putar. Lihat demonya di sini.
Bagaimana cara menambahkannya?
Masuk ke bagian Edit HTML.
Cari kode berikut:
<b:section class='sidebar' id='sidebar' preferred='yes'>

Dan dibawahnya masukkan kode berikut:

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

Sekarang lihat pada warna-warna di atas.
Warna Merah menunjukkan ukuran Width (Lebar) dari widget tersebut. Sesuaikan dengan ukuran Sidebar kalian.
Warna Ungu menunjukkan ukuran Height (Tinggi) dari widget tersebut. Sesuaikan juga.
Warna Hitam menunjukkan warna Background dari widget tersebut. Ganti ffffff (putih) dengan background yang sesuai dengan Blog kalian.
Dan warna Hijau menunjukkan warna Teks pada Widget ini. Sesuaikan dengan background-nya, dengan cara mengganti angka dengan kode warna yang lain, tanpa tanda pagar (#). Jadi jika Background-nya putih, warna teks jangan putih lagi, misalnya hitam.

Dan lalu Save Template. Lihat label pada Blog anda. Bagus bukan?

Label Cloud

Jenis label ini lebih sederhana dari yang di atas. Contohnya seperti pada gambar berikut.

Apa yang unik? Semakin banyak Post yang ada di label itu, semakin besar font label itu! Lihat perbandingan dari Label "eclipse" dan "interesting". Beda Font bukan?
Ah, langsung saja!
Masuk ke Edit HTML.
Kopi kode CSS berikut sebelum ]]></b:skin>.

/* 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}

Dan sekarang kopi kode berikut SETELAH kode ]]></b:skin> ini. Ini berfungsi untuk membuat efek "awan" tersebut.

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

Lalu cari kode berikut.

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Dan Paste semua konten di dalam widget tersebut dengan kode ini. (Cara mengetahui konten widget itu hapus semua kode di bawah kode di atas sampai menemukan <b:widget id= yang lain lagi.)

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}


var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

Lalu Preview dulu kalau berhasil Save Template-mu.

Read More...

Summary only...