| |

Membuat Popular Tag [Tag Cloud]

Label tag cloud adalah label berbentuk awan. Sebenarnya ada dua jenis label tag cloud: pertama tag cloud jenis comullus [label awan animasi/ tampilan labelnya bergerak]; kedua, tag cloud standard [label awan tanpa animasi/ tidak bergerak]. Kali ini saya akan membagikan cara membuat label tag cloud untuk blogger [blogspot] tanpa animasi. Jika anda tertarik mempergunakan label tag cloud tanpa animasi, silahkan ikuti tutorial dibawah ini.

Langkah Pertama
1. Login ke blogger anda
2. Pada Dashboard pilih layout atau pengaturan
3. Pada Page Element klik add gadged
4. Kemudian pilih label
5. Klik tombol simpan/ save

Langkah Kedua
1. Klik edit html dab beri tanda centang pada Expand Widged Templates (jangan lupa, terlebih dulu di backup template anda)
2. Cari kode ]]></b:skin>
3. Copy paste kode dibawah ini tepat diatas kode nomer 2

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

4. Copy paste kode dibawah ini tepat dibawah kode nomer 2

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

5. Lalu tekan tombol save/ simpan template

Langkah Ketiga
Masih tetap dihalaman Edit HTML silakan cari kode seperti dibawah ini:

<b:widget id='Label2' 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'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>

[Setiap template kodenya berbeda-beda, jadi cari kode yang hampir menyamai kode diatas]

Kemudian ganti semua kode tersebut 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>

Setelah itu tekan tombol save/ simpan template dan lihat hasilnya...
Jika ada pertanyaan silahkan sampaikan pada kolom komentar dibawah ini
Selamat mencoba.


internet marketing
Bagi anda yang ingin belajar PHP / HTML / MySQL dengan sangat mudah sambil langsung praktek, saya sarankan untuk anda bisa belajar di sini

2 komentar:

Natalia Sofia mengatakan...

aku juga make ini dah lama, kelemahannya adalah gak ke detect sama google search engine, but karena aku suka yah tetep dipake

Ker3n mengatakan...

Jadi ga kedetect ya? Padahal gue pingin yang kedetect. Untuk nggantiin tulisan biasa gitu. Tapi thanks infonya.

Posting Komentar

Silahkan tinggalkan pesan dan komentar anda di kolom bawah ini. Segala komentar yang mengandung unsur SARA akan kami hapus.