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.

view sourceprint?

01	/* Label Cloud Styles----------------------------------------------- */

02	#labelCloud {text-align:center;font-family:arial,sans-serif;}

03	#labelCloud .label-cloud li{display:inline;background-image:none

04	!important;padding:0 5px;margin:0;vertical-align:baseline

05	!important;border:0 !important;}

06	#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}

07	#labelCloud a img{border:0;display:inline;margin:0 0 0

08	3px;padding:0}

09	#labelCloud a{text-decoration:none}

10	#labelCloud a:hover{text-decoration:underline}

11	#labelCloud li a{}

12	#labelCloud .label-cloud {}

13	#labelCloud .label-count

14	{padding-left:0.2em;font-size:9px;color:#000}

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

view sourceprint?

01

<script

02	type='text/javascript'>

03	// Label Cloud User Variables

04	var cloudMin = 1;

05	var maxFontSize = 20;

06	var maxColor = [0,0,255];

07	var minFontSize = 10;

08	var minColor = [0,0,0];

09	var lcShowCount = false;

10

</script>

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

view sourceprint?

1	<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..!!!

view sourceprint?

001	<b:widget id='Label1'

002	locked='false' title='Labels' type='Label'>

003	<b:includable id='main'>

004	<b:if cond='data:title'>

005	<h2><data:title/></h2>

006

</b:if>

007	<div class='widget-content'>

008	<div id='labelCloud'/>

009	<script type='text/javascript'>

010

011	// Don't change anything past this point -----------------

012	// Cloud function s() ripped from del.icio.us

013

014	function s(a,b,i,x){

015	if(a>b){

016	var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)

017

}

018

019

else{

020	var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)

021

}

022

return v

023

}

024

025

var c=[];

026	var labelCount = new Array();

027	var ts = new Object;

028	<b:loop values='data:labels' var='label'>

029	var theName =

030	&quot;<data:label.name/>&quot;;

031	ts[theName] = <data:label.count/>;

032

</b:loop>

033	for (t in ts){

034	if (!labelCount[ts[t]]){

035	labelCount[ts[t]] = new Array(ts[t])

036

}

037

}

038

039	var ta=cloudMin-1;

040	tz = labelCount.length - cloudMin;

041	lc2 = document.getElementById('labelCloud');

042	ul = document.createElement('ul');

043	ul.className = 'label-cloud';

044	for(var t in ts){

045	if(ts[t] < cloudMin){

046

continue;

047

}

048

049	for (var i=0;3 > i;i++) {

050	c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)

051

}

052

053	var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);

054	li = document.createElement('li');

055	li.style.fontSize = fs+'px';

056	li.style.lineHeight = '1';

057	a = document.createElement('a');

058	a.title = ts[t]+' Posts in '+t;

059	a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';

060	a.href = '/search/label/'+encodeURIComponent(t);

061	if (lcShowCount){

062	span = document.createElement('span');

063	span.innerHTML = '('+ts[t]+') ';

064	span.className = 'label-count';

065	a.appendChild(document.createTextNode(t));

066	li.appendChild(a);

067	li.appendChild(span);

068

}

069

else {

070	a.appendChild(document.createTextNode(t));

071	li.appendChild(a);

072

}

073	ul.appendChild(li);

074	abnk = document.createTextNode(' ');

075

&

076

nbsp;

077	ul.appendChild(abnk);

078

}

079	lc2.appendChild(ul);

080

</script>

081	><noscript>

082

<ul>

083	<b:loop values='data:labels'

084	var='label'>

085

<li>

086	<b:if cond='data:blog.url == data:label.url'>

087	<data:label.name/>

088

<b:else/>

089

<a

090	expr:href='data:label.url'><data:label.name/></a>

091

</b:if>

092	(<data:label.count/>)

093

</li>

094

</b:loop>

095

</ul>

096	</noscript>

097	<b:include

098	name='quickedit'/>

099

</div>

100	</b:includable>

101	</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:

view sourceprint?

1	var maxFontSize = 20;

2	var maxColor = [0,0,255];

3	var minFontSize = 10;

4	var minColor = [0,0,0];

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