Merubah Tampilan Labels Di Blog

Login pada Blogger

Pilih Tata Letak/Layout

Kemudian Edit HTML

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.

Copy Paste Kode berikut di atas kode ]]></b:skin>

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

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='"widget-content " + data:display + "-label-widget-content"'>
<div style='overflow:auto; width:ancho; height:250px;'>
<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/>
<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>
</b:if>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

Jangan lupa Simpan Template.

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

TekInKom

Jumat, 27 Mei 2011

Merubah Tampilan Labels Di Blog

0 komentar:

Posting Komentar

Blog Archive

Labels