Cara Buat Label/Categories TagCloud Efek

T
ag Cloud sudah biasa kita lihat pada blog lainnya,, tapi biasanya mereka mendapatkan itu dengan memanfaatkan sebuah situs untuk mendapatkan Tags Cloud yang di pasang pada blog kita ,,
dan Bloggerplungin saya menuliskan ini agar tanpa bantuan sebuah situs kita dapat menampilkan tag clouds dengan fasilitas yang disediakan oleh blogger dengan mengganti sedikit code html/javascriptnya saja..

Atau dengan mengupload Code Css & javascript ke file hosting tp sekarang dengan cara yg lebih simpel .

Untuk mendapatkan itu anda harus menampilkan label pada blog anda.. dengan cara pilih layout-->Page Element-->Add Page Element.. Pilih Label dan Save.
Kalau sudah Ikuti Cara yang berikut :
1. Pilih Layout lagi terus pilih "Edit Html"... (tidak usah di Expand Widget).
2. Cari Code

Klik show untuk melihat

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

3. Ganti Code  dengan kode yang di bawah ini:

Klik show untuk melihat

<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'/>
<p align='center'>
<script type='text/javascript'>
var cloudMin = 1;
var maxFontSize = 25;
var maxColor = [0,255,0];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;{
var m=(a-/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';

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>
</p>
<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>
<br/>Powered By:<small><a href='http://www.tipsblogspot.blogspot.com'>Blogger Widgets</a></small>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

5. Lalu Cari Code :

]]></b:skin>

6. Ganti Code tersebut menjadi :

Klik show untuk melihat

#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:&quot;&quot; !important}
]]></b:skin>

7. Save dan lihat hasilnya.. Semoga bermnfaat .

NB; sebelum anda mengganti semuanya ada baiknya untuk membackup dahulu template anda, jadi kalau ada hal yang dapat merusak blog anda dapat dihindari, karena anda telah membackupnya lebih dahulu.
Inget tiap templat berbeda beda Tergantung kejelian aja Wekwekwek......

Tukeran Link

Diposting oleh RoCkeT JOE
POSTING BERKAITAN

Blogger

• TABEL N CODE WARNA
• TABEL N CODE WARNA
• TEXT DENGAN EVEK BINTANG GEMERLAP

TEMPLATE DESIGN BY
m-template | by:bagas96