Cara Membuat Label / Tag Cloud Di Blogspot

Label pada Blog sangat berguna untuk mengelompokan posting/artikel berdasarkan kategorinya, sehingga memudahkan pembaca untuk mencari posting dengan kategori tertentu. Karena setiap posting yang kita buat berada pada tempatnya masing-masing, tidak menumpuk dalam satu tempat. dan pada postingan kali ini kita akan sedikit memodifikasi tampilan Label agar terlihat lebih menarik dengan Label/ Tag style cloud.

Bagaimana cara membuat Label/Tag cloud di Blogspot?

Langkah 1

Pastikan anda telah memasang widget Label, jika belum buka Layout/ Tata Letak pada blogger dashboard - add a widget - pasang widget Label (ketikan "Labels" atau nama lain yang ingin anda gunakan untuk judul widget Label)

Langkah 2

1. Masuk ke Template - edit HTML (lakukan back up template sebelum melakukan perubahan)

2. Cari kode yang mirip dengan kode berikut (gunakan Ctrl-F untuk mempercepat pencarian)

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

kode diatas merupakan kode dari widget Label (widget Label yang anda tambahkan pada langkah 1). Untuk mempermudah pencarian anda lebih baik fokus terhadap tipe widget type='Label' dan title widget title='Labels' yang merupakan judul dari widget Label yang telah anda tambahkan pada langkah 1.

3. Setelah kode ditemukan, ganti seluruh kode widget Label dengan kode berikut

<!-- simple Cloud Label/ Tag begin -->
<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 = true;  // 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;">Shared by <a href="http://rizki-java.blogspot.com/">Blogger Widgets</a></span>
</div>
</b:includable>
</b:widget>
<!-- simple Cloud Label/ Tag end -->

4. Preview untuk melihat perubahan dan memastikan tidak ditemukan error
5. Langkah terakhir simpan template

seharusnya saat ini tampilan Label/ Tag pada blog anda sudah berubah.