Memasang Label Cloud Pada Blogger

Posted by Herman on Saturday, March 28, 2009 27 comments

label cloudLabel cloud ini dikembangkan oleh phydeaux3. Sesuai dengan namanya, widget ini berhubungan dengan label sehingga bagi anda yang tidak memasang widget label pada blog anda. Cara ini tidak bisa digunakan.

Untuk label standar blogger, biasanya jumlah postingan yang termasuk dalam kategori tersebut akan tertera dalam bentuk angka yang terletak disampingnya. Tetapi beda dengan label cloud, yang menggambarkan jumlah postingan dalam bentuk ukuran font labelnya. Jadi semakin banyak postingan yang termasuk dalam kategori tersebut semakin besar pula ukuran fontnya. Sehingga terlihat lebih menarik dan tidak monoton. Selain itu, cara ini juga cocok untuk ukuran sidebar yang lebar karena susunannya mengurut ke samping.

Nah bagi anda yang ingin memasang label cloud ini, berikut adalah langkah-langkahnya:

1. Seperti biasa login ke Blogger. Pada menu Layout -> Edit HTML
2. Backup template anda
3. Beri tanda centang pada "Expand Widget Templates"
4. Letakkan kode dibawah ini diatas kode ]]></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}
5. Setelah itu, letakkan kode dibawah ini diatas kode </head>

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20; /* Ukuran maksimal font label*/
var maxColor = [0,0,0]; /* Warna font besar */
var minFontSize = 10; /* Ukuran minimal font label */
var minColor = [179,179,179]; /* Warna font kecil */
var lcShowCount = false;
</script>
6. Lalu cari 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'>
<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>
7. Ganti kode diatas dengan kode dibawah 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>
8. Kalau sudah, klik Save Template. Selesai

Jika sobat ingin memodifikasi ukuran dan warna font labelnya. Silahkan arahkan perhatian anda pada kode seperti ini

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20; /* Ukuran maksimal font label*/
var maxColor = [0,0,0]; /* Warna font besar */
var minFontSize = 10; /* Ukuran minimal font label */
var minColor = [179,179,179]; /* Warna font kecil */
var lcShowCount = false;
</script>
Ganti tulisan yang berwarna merah sesuai keinginan. Selamat mencoba..!


Recent Posts:

27 comments

Blok c No.3 said... 28 March, 2009
Mantap, info yang sangat berguna...
Herman said... 29 March, 2009
@Blok c no.3: makasih sob :)
voorzitter said... 20 June, 2009
tengkyu :)
Erie94 said... 02 July, 2009
:))
Nomor HP Cantik said... 31 July, 2009
Mas kalau labelnya pengen disimpan di tab view seperti yang punya mas itu gimana ya ?

Makasih mas sebelumnya
BUDI said... 01 August, 2009
aku lagi mencoba pak
NOMOR CANTIK said... 03 August, 2009
Maaf mas lagi nyoba apa maksudnya ?

Yang ounya mas khan Label Cloudnya disimpan di tab view tuch ...
Nah saya ingin buat seperti itu...
Kalau ada tutorialnya tolong minta donk ...;))
caang said... 29 November, 2009
Ok infonya mas, nanti saya coba
matakakiku said... 24 December, 2009
wess bang,. mantap sekali,. saya jadi terbantu,. maklum masih baru,.:-t hehe...
oiy salam kenal,.
Ediwan Sigit said... 25 January, 2010
ok, makasih idenya mas...! salam kenal, dan minta di inspeksi ya!
Fadliansyah(fo_fot) said... 15 March, 2010
mantap...terimakasih...!?
rieF tea' said... 23 June, 2010
maksih...:-/
ragetegar said... 27 June, 2010
bang ane mau tanya ni.. maaf klo merepotkan

coba masuk kesini

http://sheterrorart.blogspot.com

ane butuh templatenya doang ni.. imagenya pake punya ane.. gimana ya mas.. mohon bantuannya, trimakasih
Herman said... 27 June, 2010
@ragetegar:
saya sudah kunjungi blog anda. maksudnya imagenya mau diganti ya?
Chandra_Muhammad said... 07 July, 2010
thanks infonya bos ;)
SITUBONDO FORUM said... 22 August, 2010
bisa di coba nih..~x( ~x(
Anonymous said... 02 November, 2010
mas setelah kita uda save template , nanti kita langsung ke bagian rancangan pilih add gadget
lalu pilih label atay java script?
pemuda dan teknologi said... 22 November, 2010
Mas makasih....
Tole ne Toudano said... 20 January, 2011
ok gann satu lagi sedooot
Driver Master said... 25 April, 2011
mas herman mau bertanya,,
klo mau mengatur besar lebar dan tingginya form bagaimana?
Agus Salim said... 09 June, 2011
Terima kasih infonya , semoga sukses selalu.
sin_can21 said... 19 June, 2011
boleh di coba

ijin copy paste brow
Asmara Susanto said... 07 July, 2011
ane k TKP, nice inpoh lo gan
kunjungan baliknya ane tunggu, follow balik blog anda uda ane follow followback yah
Nickshensa said... 18 July, 2011
Blog Walking..... :D
azami blog said... 21 April, 2012
t
A.thoyib asal british said... 26 May, 2012
terima kasih kawann
Abi Wicaksono said... 17 August, 2012
:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment