Membuat Tag Label Cloud

Kalian pasti sudah tahukan apa itu Tag Label Cloudkan..?? Itu lho yang bentuk labelnya seperti gambar disamping. Nah sekarang kita dapat menerapkannya pada blog kita. Sebenarnya hal ini sudah lama tapi mungkin ada sobat blogger yang belum mengetahui cara membuat label seperti ini.

Sebelum memulai edit html biasakan untuk lakukan backup template agar apabila terjadi kesalahan kita dapat mengembalikan seperti semula.

Ok..!!! Langkah pertama seperti biasa kita harus login pada blogger lalu pilih tataletak lalu klik HTMl. Setelah itu cari kode berikut

]]></b:skin>

Simpan code dibawah ini sebelum kode ]]></b:skin> itu 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}

Belum selesai sampai disitu, sekarang kita harus mulai mencari kembali kode </head> lalu sisipkan kode dibawah sebelum kode </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>

Nah tinggal selangkah lagi nih tetapi di bagian ini anda harus lebih cermat. Setelah mengikuti langkah-langkah diatas sekarang kita tinggal mencari kode

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

Perlu diketahui kode <b:widget id='Label1' locked='false' title='Labels' type='Label'/> merupakan kode awal dari widget label dan harus diakhiri dengan kode </b:widget>

Jadi ganti kode <b:widget id='Label1' locked='false' title='Labels' type='Label'/> sampai kode </b:widget> dengan kode dibawah ini..!!!

<b:widget id='Label1'
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'>

  <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&gt;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 =
&quot;<data:label.name/>&quot;;

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>

Save template..!!! Sekarang coba lihat perubahannya pada widget label..???

Agar terlihat lebih menarik atau ingin sesuai keinginan kita maka kamu juga dapat merubah kode berikut:

var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;


var maxFontSize = 20; untuk besaran text maksimal
var maxColor = [0,0,255]; untuk warna (kamu dapat rubah warna dengan format RBT)
var minFontSize = 10; untuk besaran minimal text
var minColor = [0,0,0]; untuk warna terendah (kamu dapat rubah warna dengan format RBT)

Semoga berhasil dan blog kamu menjadi lebih menarik. Tetapi jangan lupa untuk memperhatikan seberapa blog kamu. Semakin berat blog kamu maka semakin lama untuk masuk ke blog kamu dan tentunya semakin malas orang untuk mengunjungi blog kamu.