Merubah Tampilan Labels Blog

1. Login pada Blogger
2. Pilih Tata Letak/Layout
3. Kemudian Edit HTML
4. Klik Expand Widget Template: langkah terbaik adalah juga men-download template dengan cara klik Download Template Lengkap sebelum melakukan edit agar bisa kembali ke pengaturan awal jika terjadi kesalahan.
5. Copy Paste Kode berikut di atas kode ]]></b:skin>

/* Label Cloud Styles die-silver.blogspot.com<br />----------------------------------------------- */<br />#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;" !important}

Kemudian tambahkan kode di bawah ini di atas kode </head>

<script type='text/javascript'><br />// Label Cloud User Variables<br />var cloudMin = 1;<br />var maxFontSize = 20;<br />var maxColor = [0,0,255];<br />var minFontSize = 10;<br />var minColor = [0,0,0];<br />var lcShowCount = false;<br /></script>

Kalo sudah cari kode berikut :

<b:widget id='Label1' locked='false' title='NAMA LABEL' 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'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Ganti semua kode di atas dengan kode berikut

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'><br /><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 /><script type='text/javascript'><br /><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('labelCloud');<br />ul = document.createElement('ul');<br />ul.className = 'label-cloud';<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('li');<br />li.style.fontSize = fs+'px';<br />li.style.lineHeight = '1';<br />a = document.createElement('a');<br />a.title = ts[t]+' Posts in '+t;<br />a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';<br />a.href = '/search/label/'+encodeURIComponent(t);<br />if (lcShowCount){<br />span = document.createElement('span');<br />span.innerHTML = '('+ts[t]+') ';<br />span.className = 'label-count';<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(' ');<br />ul.appendChild(abnk);<br />}<br />lc2.appendChild(ul);<br /></script><br /><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>

Maka hasilnya akan seperti ini


Yang Diatas adalah menggunakan Javascript nah kalau anda ingin tanpa javascript caranya andlah mencari kode ini

<b:widget id='Label1' locked='false' title='NAMA LABEL' 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'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Ganti kode di atas dengan kode di bawah ini :

<b:widget id='Label1' locked='false' title='NAMA LABEL' type='Label'>
<b:includable id='main'> <b:if cond='data:title'>
<h2><data:title/></h2>
</b:if> <div class='widget-content'>
<div style="background:#F0E8F1;margin:2px;
padding:10px;border:3px #FAF7FA solid;text-align:center;
text-transform:uppercase;">
<b:loop values='data:labels' var='label'>
<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>
</b:loop> </div>
<b:include name='quickedit'/> </div></b:includable></b:widget>

Hasilnya




Atau anda Ingin Dengan Fungsi Scroll Anda tinggal menambahkan Kode Yang saya beri warna merah saja

cari kode berikut :

<b:widget id='Label1' locked='false' title='NAMA LABEL' 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'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Kemudian Tambahkan Dengan Kode Yang Berwarna Merah

<b:widget id='Label1' locked='false' title='Kategori' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<div style='overflow:auto; width:ancho; height:250px;'>
<b:if cond='data:display == &quot;list&quot;'>
<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/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + 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>
</b:if>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

Jangan lupa Simpan Template.

Setiap template mempunyai karakter yang berbeda, mungkin di blog sobat kode yang ada adalah:


<div class='widget-content'>

bukan seperti yang ada di blog saya yaitu :

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

yang penting letak kode tambahan yang disisipkan harus benar meletakkannya.

Untuk kode height:250px adalah tinggi label scroll, silahkan sobat ganti dengan angka yang lebih tinggi jika ingin tampilan menu label yang lebih tinggi.

Selamat mencoba

Artikel Terkait: