Blogger Hacks: trik cara menampilkan Label Cloud widgets,Apa itu Label Cloud? Label cloud adalah kumpulan beberapa label dari postingan anda yang sudah anda tandai dengan label,dan apabila dari beberapa postingan itu banyak yang membaca atau me link nya judul label tersebut berubah menjadi besar dan berubah warna seperti terlihat di sebelah tulisan ini.

Berikut ini cara membuat Label Cloud:

Pastikan template anda di back up dulu sebelum membuat ini dengan cara klik
kotak exapand kemudian download full template!

Log in ke Blogger dan klik tabs layouts.

Di 'Page Elements' setup page pastikan anda sudah mempunyai/install
label widget
, kemudian klik Edit HTML settings dan di klik kotak
exapanded nya.(make sure you have label widget in page elements)

Kode Label cloud ini terdiri dari 3 bagian yaitu(3 part of code label cloud):

(part one)Bagian pertama di bagian stylesheet,

cari kode dibawah ini:




]]></ b: skin>


(copy/paste label cloud styles before ]]>/</b:skin> )Tempatkan atau copy dan paste kode di bawah ini sebelum kode tadi




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



(part two)Bagian kedua di konfiguration,

kembali ke kode dibawah ini:




]]></b:skin>



(copy/paste java script between ]]></skin> and </head> )Tempatkan atau copy dan paste kode java script di bawah ini setelah kode tadi,
tetapi sebelum kode ini </head>,di tengah tengah antara ]]></b:skin> dan </head>




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


(part three)Dan yang ketiga di widget nya itu sendiri..


cari kode dibawah ini:




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




(Replace code <b:widget id='Label'...............type='Label'/> with this code)Ganti kode di atas dengan cara Copy dan paste kode di bawah ini




<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=(ab)/Math.log(x),v=a-Math.floor(Math.log(i)*m)

}

else{

var m=(ba)/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] &lt; cloudMin){

continue;

}

for (var i=0;3 &gt; 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>



Setelah semuanya dilakukan dengan benar coba preview dan save template anda,jika tidak muncul/tampil label cloud nya,sebaiknya up load lagi template yang anda back up tadi,dan ulangi sekali lagi,

Selamat mencoba!




permalink