Blogger Tag Cloud Widget menurut Kategori / Label

Widget ini sangat cocok untuk pengguna blogspot yang menginginkan sebuah tag cloud sederhana untuk Kategori mereka. The Cloud Label mudah dapat diimplementasikan dalam sidebar blog Anda dan akan cocok dengan template anda.

Langkah 1: Back Up Template Anda
Selalu pastikan untuk membuat cadangan Anda Template Anda sebelum melakukan apapun!
Langkah 2 : Widget Label

Pastikan bahwa Anda memiliki Elemen Halaman Label diinstal. Jika Anda belum ...

1. Pergi ke Layout> Page Elements.
2. Klik "Tambah Gadget" dan kemudian menambahkan "Label" gadget.

Langkah 3 : Temukan Kode Lawas

1. Sekarang pergi ke Layout> Edit HTML
2. Pastikan bahwa "Expand Widget Template" kotak tidak dicentang.
3. Sekarang kita perlu mencari kode yang terlihat seperti ini.

   <b:widget id='Label1' locked='false' title='Tags' type='Label'/>

   Kode Anda mungkin terlihat sedikit berbeda. Jadi cobalah menemukan   type = 'Label'

Langkah 4 : Ubah Kode Lawas Dengan Kode Baru

1. Setelah Anda menemukan type = 'Label', anda kemudian centang Expand Widget Templates, lalu hapuslah seluruh baris kode yang tampak seperti kode yang disebutkan di bagian 3 dari langkah 3 Yang mungkin kode seperti ini 

<b:widget id='Label1' locked='false' title='Labels' 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;'>
    <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>
</b:includable>
</b:widget>

      2. Ganti kode yang Anda baru saja dihapus dengan kode di bawah ini:

/*
Distributed by Jonathan Eko Satrio at  pelajari-selengkapnya.blogspot.com
*/ <b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' style='text-align: justify;'>
<script type='text/javascript'>
/*
Simple Blogger Tag Cloud Widget
by Jonathan Eko Satrio
http://pelajari-selengkapnya.blogspot.com
Released to the Public Domain
*/
//Settings / Variables
var max = 150; //max css size (in percent)
var min = 70; //min css size (in percent)
var showCount = false; // show counts? true for yes, false for no
var minCount = 1; // what is the minimum count for a tag to be shown? 1 for all
//Begin code:
var range = max - min;
//Build label Array
var labels = new Array();
<b:loop values='data:labels' var='label'>
labels.push(&quot;<data:label.name/>&quot;);
</b:loop>
//URLs
var urls = new Array();
<b:loop values='data:labels' var='label'>
urls.push(&quot;<data:label.url/>&quot;);
</b:loop>
//Counts
var counts = new Array();
<b:loop values='data:labels' var='label'>
counts.push(&quot;<data:label.count/>&quot;);
</b:loop>
//Number sort funtion (high to low)
function sortNumber(a, b)
{
return b - a;
}
//Make an independant copy of counts for sorting
var sorted = counts.slice();
//Find the largest tag count
var most = sorted.sort(sortNumber)[0];
//Begin HTML output
for (x in labels)
{
if(x != &quot;peek&quot; &amp;&amp; x != &quot;forEach&quot; &amp;&amp; counts[x] >= minCount)
{
//Calculate textSize
var textSize = min + Math.floor((counts[x]/most) * range);
//Show counts?
if(showCount)
{
var count = &quot;(&quot; + counts[x] + &quot;)&quot;;
}else{
var count = &quot;&quot;;
}
//Output
document.write(&quot;<span style='font-size:&quot; + textSize + &quot;%'><a href='&quot; + urls[x] + &quot;' style='text-decoration:none;'>&quot; + labels[x] + count + &quot;</a></span> &quot; );
}
}
</script>
<br/>
<span style="font-size:80%;float:right;">Powered by <a href="http://pelajari-selengkapnya.blogspot.com">Ayo Kita Belajar</a></span>
</div>
</b:includable>
</b:widget>

Langkah 5 : Preview Dahulu
Sebelum anda menyimpan Template, anda harus preview dahulu agar tidak terjadi kesalahan