Membuat Label Teknik Cloud dengan Script dan Non Script

Setelah mengenal tentang Label dan pemasangannya, ada beberapa teknik tampilan Label, salah satunya yaitu dengan Teknik Cloud. Sebenarnya, ini bukan hal yang luar biasa lagi, trik ini sudah banyak digunakan orang dan banyak orang yang sudah mem-publikasikannya. Tapi di sini, akan diulas kembali bagaimana cara membuat Label dengan Teknik Cloud dengan tujuan untuk memperindah tampilan blog tentu saja. Yang pertama adalah :

---

Membuat Label Cloud menggunakan Javascript

---

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
   ----------------------------------------------- */
   #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:&quot;" !important} 


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


7. Kalo udah 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>


8. Ganti tulisan NAMA LABEL dengan Nama Label yang tertampil di blogmu.


9. Ganti semua kode di atas dengan kode berikut :
   
   
   <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>


10. Klik tombol Simpan
    
11. Maka hasilnya akan seperti ini
    
    

Dan ini adalah trik kedua yaitu :

---

Membuat Label Cloud menggunakan Non Javascript

---

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. Kemudian 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>


6. 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>


7. Ganti tulisan NAMA LABEL dengan Nama Label yang tertampil di blogmu.


8. Klik Simpan
   
9. Maka Hasilnya Akan Seperti ini
   
   

Itu cara yang sudah q buktikan di blog q yang satunya dan hasilnya berhasil. Semoga di blog kalian juga yaaa? Mudah-mudahan artikel q bermanfaat :D