Merubah Tampilan Label

Hai sobat t'Net kali ini saya ingin memberikan tips untuk merubah tampilan dari label blog kita. Kebanyakn bentuk label dalam blogger kuraang menarik menurut saya. Sepetrti contoh label yang banyak memakan tempat, sehingga blog kita tersebut kurang beraturan akibat space untuk label yang sangat banyak. Sehingga alangkah lebih baiknya jika kita modifikasi menjadi lebih mengerit tempat dan yang pasti lebih menarik juga.
Berikut contoh label yang memakan tempat banyak:

Contoh label

Nah setelah mempelajari beberapa lama, ternyata label ini bisa juga untuk dimodifikasi. Oke langsung saja untuk melakukan modifikasinya silahkan anda ikuti langkah-langkah berikut.


1. Login ke blogger.com dengan ID anda sendiri (pasti dong)
2. Silahkan pilih Rancangan
3. Pilih Edit HTML
4. Kemudian anda cari kode seperti ini  ]]></b:skin>
5. Letakkan kode di bawah ini tepat 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}

6. Kemudian tambahkan kode di bawah ini tepat 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>

7. Setelah itu, silahkan cari kode yang MIRIP seperti 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'>
<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>

8. Ganti semua kode di atas dengan kode berikut (di bawah)

<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:

Contoh Label

Yang Diatas adalah menggunakan Javascript nah jika anda ingin tanpa javascript caranya andalah mencari kode yang mirip seperti 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 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'>
<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>

 Maka  hasilnya sebagai berikut:

Contoh bentuk label

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

Cari kode seperti 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>

Kemudian tambahkan kode yang berwarna hijau:

<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, jika perlu pilih dulu Pratinjau/Preview untuk melihat hasilnya