Cara Membuat Label Cloud Blogger

Kali ini saya akan mencoba untuk menjelaskan tentang Cara Membuat Label Cloud Blogger, dengan merubah tampilan menjadi Cloud maka Label atau Kategori akan menjadi sederet tulisan-tulisan kategori yang di tandai dengan font-font tebal dan tipis. Berbeda dengan tampilan biasa yang hanya tulisan-tulisan ke bawah serta di tandai dengan angka-angka yang menunjukkan jumlah postingan di dalam setiap kategori tersebut

Untuk contoh tampilannya seperti pada gambar di bawah ini :

 

Di atas tampak terlihat sederetan tulisan-tulisan label atau kategori yang di bedakan dengan font tebal dan font tipis, untuk font tebal adalah kategori yang jumlah postingan nya terbanyak, sedangkan sebaliknya untuk font yang tipis maka jumlah potingannya sedikit.

Untuk cara membuatnya ikuti langkah-langkah di bawah ini :

1. Log In terlebih dahulu ke akun blog agan
2. Pilih Rancangan lalu pilih Edit HTML
3. Download template lengkap seperti biasa, untuk berjaga-jaga apabila terjadi kesalahan saat pengeditan.
4. Centang Expand Template Widget. tunggu sampai loading selesai
5. Cari kode ]]></b:skin> lalu letakkan kode di bawah ini tepat di atasnya

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

Untuk memudahkan pencarian kode bisa menggunakan Ctrl+F pada keyboard lalu masukkan kodenya dan tekan Enter

6. Cari Kembali kode </head> lalu letakkan kode di bawah ini tepat di atasnya

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

7. Langkah Terakhir, cari kembali kode di bawah 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'>
<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>

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

Untuk memudahkan pencarian kode di atas bisa di cari dengan kode 'Label1' . Perlu di ingat setiap template berbeda kodenya jadi yang penting cari saja kodenya sampai pada kode

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

Setelah Berhasil di temukan tinggal ganti semua kode di atas dengan 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&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>

7. Sesudah Selesai tinggal tekan tombol Simpan Template. lalu lihat hasilnya

Hopplah selesai juga. Sekian postingan kali ini tentang Cara Membuat Label Cloud Blogger, semoga berhasil. Selamat Mencoba