Cara Memasang Label Cloud di Blogger / Blogspot

Salah satu ciri khas blog berplatform Wordpress adalah adanya label cloud. Konon, widget ini juga berpengaruh pada SEO. Tapi, blog berbasis blogger atau blogspot pun kini bisa ditambahi widget label cloud. Seperti yang ada di blog baru saya ini. Cara memasang label cloud sangat mudah.


1. Masuk Layout, Edit HTML (tak perlu centang expand widget template).

2. Cari kode <b:widget id='Label1' locked='false' title='Label Cloud' type='Label'> atau yang mirip itu.

3. Tambahkan kode berikut ini di bawahnya:
<br /><strong><b:includable id='main'><br /><b:if cond='data:title'><br /><h2><data:title/></h2><br /></b:if><br /><br /><div class='widget-content'><br /><div id='labelCloud'/><br /><p align='center'><br /><script type='text/javascript'><br />var cloudMin = 1;<br />var maxFontSize = 25;<br />var maxColor = [0,255,0];<br />var minFontSize = 10;<br />var minColor = [0,0,0];<br />var lcShowCount = false;<br />// Don't change anything past this point -----------------<br />// Cloud function s() ripped from del.icio.us<br />function s(a,b,i,x){<br />if(a&gt;b){<br />var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)<br />}<br />else{<br />var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)<br />}<br />return v<br />}<br /><br /><br />var c=[];<br />var labelCount = new Array(); <br />var ts = new Object;<br /><b:loop values='data:labels' var='label'><br />var theName = &quot;<data:label.name/>&quot;;<br />ts[theName] = <data:label.count/>;<br /></b:loop><br /><br />for (t in ts){<br />if (!labelCount[ts[t]]){<br />labelCount[ts[t]] = new Array(ts[t])<br />}<br />}<br />var ta=cloudMin-1;<br />tz = labelCount.length - cloudMin;<br />lc2 = document.getElementById(&#39;labelCloud&#39;);<br />ul = document.createElement(&#39;ul&#39;);<br />ul.className = &#39;label-cloud&#39;;<br />for(var t in ts){<br />if(ts[t] &lt; cloudMin){<br />continue;<br />}<br />for (var i=0;3 &gt; i;i++) {<br />c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)<br />} <br />var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);<br />li = document.createElement(&#39;li&#39;);<br />li.style.fontSize = fs+&#39;px&#39;;<br /><br />a = document.createElement(&#39;a&#39;);<br />a.title = ts[t]+&#39; Posts in &#39;+t;<br />a.style.color = &#39;rgb(&#39;+c[0]+&#39;,&#39;+c[1]+&#39;,&#39;+c[2]+&#39;)&#39;;<br />a.href = &#39;/search/label/&#39;+encodeURIComponent(t);<br />if (lcShowCount){<br />span = document.createElement(&#39;span&#39;);<br />span.innerHTML = &#39;(&#39;+ts[t]+&#39;) &#39;;<br />span.className = &#39;label-count&#39;;<br />a.appendChild(document.createTextNode(t));<br />li.appendChild(a);<br />li.appendChild(span);<br />}<br />else {<br />a.appendChild(document.createTextNode(t));<br />li.appendChild(a);<br />}<br />ul.appendChild(li);<br />abnk = document.createTextNode(&#39; &#39;);<br />ul.appendChild(abnk);<br />}<br />lc2.appendChild(ul); <br /></script><br /></p><br /><noscript><br /><ul><br /><b:loop values='data:labels' var='label'><br /><li><br /><b:if cond='data:blog.url == data:label.url'><br /><data:label.name/><br /><b:else/><br /><a expr:href='data:label.url'><data:label.name/></a><br /></b:if><br />(<data:label.count/>)<br /></li><br /></b:loop><br /></ul><br /></noscript><br /><b:include name='quickedit'/><br /></div><br /><br /></b:includable><br /></b:widget></strong><br />

4. Cari kode ]]></b:skin>

5. Tambahkan kode ini di atasnya:
<br /><strong>#labelCloud {text-align:center;font-family:arial,sans-serif;}<br />#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}<br />#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}<br />#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}<br />#labelCloud a{text-decoration:none}<br />#labelCloud a:hover{text-decoration:underline}<br />#labelCloud li a{}<br />#labelCloud .label-cloud {}<br />#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}<br />#labelCloud .label-cloud li:before{content:&quot;&quot; !important}</strong><br />
6. Simpan. Selesai dan lihat hasilnya.

Selamat mencoba. Mudah-mudahan berhasil.