Menambahkan Tag Cloud Pada Template Blogspot

Tidak hanya Blog WordPress saja yang bisa menggunakan fitur Tag cloud, Blogger juga sekarang bisa lho.bisa dilakukan langsung melalui Page Element. Namun terkadang (sesuai dengan pengalaman saya) kebanyakan theme masih belum mendukung tag cloud yang cantik seperti yang terdapat pada wordpress, seperti halnya tidak adanya perbedaan ukuran huruf (yang didasarkan kepada jumlah kategori postingan), semakin banyak kategori postingan, maka ukuran/ size huruf Tag coud tsb akan semakin besar (contohnya seperti gambar diatas).

Nah tidak usah bertele – tele lagi, saya akan langsung saja memberikan tutorialnya dibawah ini, namun dengan catatan: selalu pastikan anda sudah membackup template anda sebelum melakukan perubahan apa pun, hal tsb untuk mengantisipasi kalau – kalau saja akan terjadi kesalahan ada saat proses editing:

1. pastikan anda sudah memasang Widget label terlebih dahulu pada Layout >Page Elements (Tambah Widget yang bernama LABEL)
2. Setelah berhasil selanjutnya anda menuju ke Halaman Layout -> Edit HTML, lalu centang opsi “Expand Widgets Template” yang ada disana. Lalu beris perintah berikut:

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

3. Selanjutnya anda Replace/ timpah baris perintah kode diatas dengan kode dibawah ini:

   <b:widget id='Label1' locked='false' title='Tags' 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 Raymond May Jr.
   http://www.compender.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="https://www.potter.web.id">Blog Indonesia</a></span>
   </div>
   </b:includable>
   </b:widget>

4. Nah selesai deh, selanjutnya coba anda preview tampilan index blognya, kalau berhasil (tag cloudnya muncul), ya tinggal anda SAVE saja.

Demikian, semoga dapat bermanfaat.

Penulis: Lilis Mayasari/ LieZMaya, reff dari berbagai sumber.