Cara Membuat Label Tag Cloud

Incoming Search : Cara Membuat Label Tag Cloud | Cara Membuat Label Cloud di Blogspot | Cara Membuat Label Tag Cloud untuk Blog | How To Create Tag Cloud Label For Blogspot

---

Tutorial kali ini membahas Cara Membuat Label Tag Cloud. Semua pasti suda  pada tau kan apa itu Tag Cloud ? untuk contoh silahkan lihat gambar,  Tag Cloud sudah biasa kita liahat pada blog lainnya,, tapi biasanya mereka mendapatkan itu dengan memanfaatkan sebuah situs untuk mendapatkan Tags Cloud yang di pasang pada blog kita , merujuk dari phydeaux3, untuk itu perhatikan Cara Membuat Label Tag Cloud

dari Blogger plugin saya menuliskan ini agar tanpa bantuan sebuah situs kita dapat menampilkan tag clouds dengan fasilitas yang disediakan oleh blogger dengan mengganti sedikit kode html/javascriptnya saja..

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 Kode

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

3. Ganri Kode tersebut dengan kode yang 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'/>
<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;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(&#39;labelCloud&#39;);
ul = document.createElement(&#39;ul&#39;);
ul.className = &#39;label-cloud&#39;;
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(&#39;li&#39;);
li.style.fontSize = fs+&#39;px&#39;;

a = document.createElement(&#39;a&#39;);
a.title = ts[t]+&#39; Posts in &#39;+t;
a.style.color = &#39;rgb(&#39;+c[0]+&#39;,&#39;+c[1]+&#39;,&#39;+c[2]+&#39;)&#39;;
a.href = &#39;/search/label/&#39;+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement(&#39;span&#39;);
span.innerHTML = &#39;(&#39;+ts[t]+&#39;) &#39;;
span.className = &#39;label-count&#39;;
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(&#39; &#39;);
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://dangstars.blogspot.com/2011/12/cara-membuat-label-tag-cloud.html'>Blogger Widgets</a></small>
<b:include name='quickedit'/>
</div>

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

5. DAn Cari Kode :

]]></b:skin>

6. Ganti KOde tersebut menjadi :

#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. Simpan dan lihat hasilnya. Bagaimana ? Berhasil gak gan ? semoga saja sih berhasil..... :)

Sekian Postingan mengenai Cara Membuat Label Tag Cloud di Blog yang saya published, semoga Bermanfaat.Sumber onyxblog94.blogspot.com