Membuat Label dengan Teknik Cloud dengan Script dan Non Script

Setelah sedikit mempelajari mengenai label.Mungkin label buatan blogger cukup simple saja,ingin memberi sedikit sentuhan indah untuk label teman,sentuhan yang cantik dan fresh.


Sebenarnya ini request dari teman saya,Mbak Lyla.

mantep ilmunya... tag cloud nya punya ku ilang kodenya di posting ya... hehee...

Membuat Label Cloud menggunakan Javascript

• Login ke Blogger.com

• Klik Menu Edit HTML

• Klik Edit HTML → Sebelumnya terlebih dahulu teman backup dulu templatenya dengan mengklik Download Template Lengkap.Supaya bila terjadi kesalahan maka bisa diulang kembali.

• Klik Expand Widget Template

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

  /* Label Cloud Styles
  ----------------------------------------------- */
  #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}

• Copy Paste kode berikut sebelum kode </head>

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

• Teman cari kode berikut :
  <b:widget id='Label1' locked='false' title='KATEGORI ARTIKEL' type='Label'>
  
  

• Secara lengkapnya begini :

  <b:widget id='Label1' locked='false' title='KATEGORI ARTIKEL' 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 diatas dengan kode dibawah ini :

  <b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
  <b:includable id='main'>
  <b:if cond='data:title'>
  <h2><data:title/></h2>
  </b:if>
  
  <div class='widget-content'>
  <div id='labelCloud'/>
  <script type='text/javascript'>
  
  // Don't change anything past this point --------------
  // Cloud function s() ripped from del.icio.us
  function s(a,b,i,x){
  if(a&gt;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 = &quot;<data:label.name/>&quot;;
  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] &lt; cloudMin){
  continue;
  }
  for (var i=0;3 &gt; 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';
  li.style.lineHeight = '1';
  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';
  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>
  
  <noscript>
  <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>
  </noscript>
  <b:include name='quickedit'/>
  </div>
  
  </b:includable>
  </b:widget>

• Ganti Tulisan 'KATEGORI ARTIKEL' dengan judul label yang anda terapkan

• Klik tombol Simpan Template.

• Maka hasilnya :
  

Saya telah mencoba trik yang ini,tetapi tidak berhasil mungkin karena tidak compatitable dengan template saya

Membuat Label Cloud menggunakan Non Javascript

Tutorial yang tak asing lagi dari kang jaloe,sebagai pelengkap tutorial ini maka saya akan membuatnya :

• Login ke Blogger.com

• Klik Menu Edit HTML

• Klik Edit HTML --> Sebelumnya terlebih dahulu teman backup dulu templatenya dengan mengklik Download Template Lengkap.Supaya bila terjadi kesalahan maka bisa diulang kembali.

• Klik Expand Widget Template

• Cari kode berikut :
  <b:widget id='Label1' locked='false' title='KATEGORI ARTIKEL' type='Label'>

• Ganti Tulisan 'KATEGORI ARTIKEL' dengan judul label yang anda terapkan

• Secara lengkapnya begini :

  <b:widget id='Label1' locked='false' title='KATEGORI ARTIKEL' 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 diatas dengan kode dibawah ini :

  <b:widget id='Label1' locked='false' title='KATEGORI ARTIKEL' 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>

Sedikit Keterangan :

1. Kode yang pertama <ul> <li> </li> </ul> dihilangkan.
2. Kode yang berwarna merah kode yang telah ditambahkan.

• Simpan Template.

• Maka hasilnya begini :

Menghapus angka (1) (1) (1) (1) atau jumlah labelnya

Caranya hapus kode ini (<data:label.count/>) dibagian kode dibawah ini.

<b:widget id='Label1' locked='false' title='KATEGORI ARTIKEL' 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 begini :

Semoga tutorial dari saya berguna yakalau berhasil hebat deh.Terima kasih untuk kang jaloe atas sedikit pengetahuannya.