Membuat Cloud Tag di Blogger

Jika Anda pernah berkunjung pada sebuah blog yang berplatform Wordpress, kemungkinan besar Anda juga pernah melihat Tag Cloud bukan? Cloud Tag adalah widget yang sangat unik, dimana jika Anda memiliki artikel yang sangat banyak dalam suatu tag tertentu, maka ukuran tag tersebut akan menjadi lebih besar dibandingkan dengan ukuran tag yang lain. Layaknya seperti awan, ada yang besar dan ada yang kecil. Bagi Anda yang mengira widget ini hanya terdapat di Wordpress, jangan berkecil hati, karena ada trik sederhana tentang bagaimana cara memasang Cloud Tag di Blogger. Ikuti langkah-langkah di bawah ini.

Login ke Blogger in Draft > pilih Blog yang akan Anda tambahkan widget Cloud Tagnya

Selanjutnya, masuk ke halaman Layout > Klik Add Gadget > Tambahkan Gadget Label

Nah jika sudah, ganti Title dengan label001, ini tujuannya agar mempercepat pencarian pada langkah selanjutnya. Jika Anda sudah berhasil memasang kode ini, Anda dapat menggantinya nanti.

Selanjutnya untuk parameter yang lain selain Title, biarkan seperti biasa dan klik SAVE

Belum berhenti sampai disitu, masuk ke halaman Template > Edit Template HTML > Klik Expand widget Templates

Oke, kemudian cari baris berikut :

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

Gunakan Ctrl + F dan ketikkan label001, inilah yang dimaksudkan kenapa harus memberikan nama label001 pada langkah sebelumnya agar mempercepat proses pencarian.

Nah, Anda melihat tag <b:widget pada baris di atas, blog tag tersebut sampai dengan tag </b:widget

Jelasnya seperti ini (klik gambar untuk Zoom):

REPLACE kumpulan baris kode tadi dengan kode di bawah ini :

/*
Distributed by http://www.indoblogtrik.com
*/ <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;'>
&lt;script type='text/javascript'&gt;
/*
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();
&lt;b:loop values='data:labels' var='label'&gt;
labels.push(&quot;&lt;data:label.name/&gt;&quot;);
&lt;/b:loop&gt;
//URLs
var urls = new Array();
&lt;b:loop values='data:labels' var='label'&gt;
urls.push(&quot;&lt;data:label.url/&gt;&quot;);
&lt;/b:loop&gt;
//Counts
var counts = new Array();
&lt;b:loop values='data:labels' var='label'&gt;
counts.push(&quot;&lt;data:label.count/&gt;&quot;);
&lt;/b:loop&gt;
//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] &gt;= 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;&lt;span style='font-size:&quot; + textSize + &quot;%'&gt;&lt;a href='&quot; + urls[x] + &quot;' style='text-decoration:none;'&gt;&quot; + labels[x] + count + &quot;&lt;/a&gt;&lt;/span&gt; &quot; );
}
}
&lt;/script&gt;
<br/>
<span style="font-size:80%;float:right;">Didukung oleh<a href="http://www.indoblogtrik.com">IndoBlogTrik</a></span>
</div>
</b:includable>
</b:widget>

Simpan template Anda, lihat hasilnya. Semoga berhasil!

Artikel Terkait