Cara Membuat Label Cloud Keren

Salam Blogger. Kali Ini Saya Akan Share Cara Membuat Label Cloud Keren,... kalau Mau Pasang Diblogger Kalian Silahkan Simak Cara-Cara Berikut Ini

Pada artikel kali ini saya akan share mengenai cara membuat label bentuk cloud perti berikut :

Sebelum kita lanjut, sahabat harus terlebih dahulu menambahkan label di blog Baca "Cara Menambahkan Gadget  Label di Blog" yang saya posting sebelumnya

Kalau sudah sahabat sudah memiliki Gadget Labels (namanya labels) yang diletakkan sesuai keinginan

Sahabat cuman modelnya belum seperti diatas khan...hehehehe..nah untuk membuatnya ikuti langkah - langkah dibawah ini.

Langkah - langkah menambah gadget label di blog sebagai berikut :

1.  Masuk keakun blog anda

2. selanjutnya pilih rancangan (design) 

3. Pilih edit HTML

4. Centang Expand Template Widget, Sebelum mengedit silahkan download dulu template anda untuk menjaga kalau – kalu dalam melakukan perubahan terjadi kesalahan (error)

5. Cari kode HTML ini <b:widget id='Label1' locked='false' title='Labels' type='Label'/> 
     Keterangan : untuk id='label1' sesuaikan dengan labels yang dibuat (label1,label2 atau label?) 

6. Copy code ini dan ganti kode <b:widget id='Label1' locked='false' title='Labels' type='Label'/> yang tadi

<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 expr:class='"widget-content " + data:display + "-label-widget-content"'><b:if cond='data:display == "list"'> <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> <b:if cond='data:showFreqNumbers'> <span dir='ltr'>(<data:label.count/>)</span> </b:if> </li> </b:loop> </ul><b:else/> <div id='labelCloud'/><p align='center'><script type='text/javascript'> var cloudMin = 1; var maxFontSize = 30; var maxColor = [35,130,196]; var minFontSize = 13; var minColor = [35,130,195]; <b:if cond='data:showFreqNumbers'> var lcShowCount = true; <b:else/> var lcShowCount = false; </b:if> // Don’t change anything past this point ----------------- // Cloud function s() ripped from del.icio.us function s(a,b,i,x){ if(a>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 = "<data:label.name/>"; 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] < cloudMin){ continue; } for (var i=0;3 > 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'; span.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')'; 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> <b:loop values='data:labels' var='label'> <span expr:class='"label-size label-size-" + data:label.cssSize'> <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> <b:if cond='data:showFreqNumbers'> <span class='label-count' dir='ltr'>(<data:label.count/>)</span> </b:if> </span> </b:loop> <br /> Powered By:<small><a href='http://www.bloggerplugins.org'>Blogger Gadgets</a></small> <br /> <small><a href='http://www.bloggerplugins.org/2008/06/label-cloud-widget-for-blogger-blogspot.html'>Label Cloud for Blogger</a></small> </noscript> </b:if> <b:include name='quickedit'/> </div></b:includable> </b:widget>

7. Kemudian cari lagi kode ]]></b:skin>

8. Copy kode berikut kemudian ganti kode ]]></b:skin>  yang tadi

#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} ]]></b:skin>

9. Simpan / save, semoga bermanfaat

Backlink Please..!!

URL

Code For Forum

HTML Code <a href='http://heric-ajha.blogspot.com/2012/08/cara-membuat-label-cloud-keren.html' target='_blank'>Cara Membuat Label Cloud Keren</a>

Artikel terkait :