Bikin Tag Cloud di Blogspot
Oleh Victor | Nov. 30, 2009 | Blogging, Tutorial & Trik Blogspot
Tag Cloud yang saya maksud di sini adalah seperti Tag Cloud yang ada pada WordPress. Tag Cloud dalam WordPress akan muncul sesuai dengan tag yang kita isikan dalam setiap artikel, semakin banyak tag yang sama maka otomatis tampilan tag di sidebar (widget) akan semakin besar (lebih besar dibanding tag lainnya).
Dalam Blogspot sendiri tidak dikenal istilah Tag, tapi kita bisa membuat tag tersebut berdasarkan Label (saya sendiri menganggap Label ini sebagai sebuah Kategori), karena dalam setiap artikel kita juga memasukkan label tertentu. Hanya saja di dalam Blogspot jika kita punya banyak label sama maka label tersebut tidak akan berubah ukurannya, paling kita hanya bisa menambahkan keterangan jumlah artikel yang menggunakan label sama.
Membuat Tag Cloud dalam Blogspot sebenarnya relatif mudah, berikut saya akan informasikan cara pembuatannya. Blogspot yang saya gunakan sebagai contoh ini telah saya update editor blogspot-nya, jadi ada kemungkinan tampilan dalam panel-panel Blogspot akan berbeda pula.
Hal pertama yang kita lakukan adalah kita pasang Gadget Label (jika sudah punya Gadget Label maka bisa kita lewati langkah ini dan bisa langsung masuk ke Edit HTML). Untuk memasang Gadget Label kita masuk ke menu Layout kemudian Page Element. Tentukan tempat dimana kita akan menempatkan Gadget Label kemudian klik Add a Gadget, selanjutnya pilih Labels. Beri nama (Title) dengan Tags (atau nama lain) dan simpan (Save).



Langkah berikutnya kita masuk ke menu Edit HTML, jangan lupa klik Expand Windget Templates untuk memunculkan seluruh script yang ada. Jangan lupa untuk selalu melakukan backup templates blogspot kita terlebih dahulu setiap kali kita akan melakukan perubahan (modifikasi) dari templates blogspot kita.

Di sini kita mencari script seperti di bawah ini.
<b:widget id='Label1' locked='false' title='Tags' type='Label'/>
Untuk memudahkan pencarian script, sama seperti trik Blogspot sebelumnya (membuat list judul artikel, menambahkan Gadget pada Header, membuat Artikel Terkait, membuat Read more cara lama) kita manfaatkan fungsi pencarian dari browser (di sini saya gunakan Firefox) tekan Ctrl+F untuk mengaktifkan fungsi pencarian dan masukkan kata kunci berupa script di atas, jika tidak ketemu, coba gunakan kata kunci title=’Tags’ (karena tadi kita gunakan nama Gadget Labels = Tags, jika menggunakan nama lain, maka ganti kata Tags dengan nama Gadget Labels yang kita gunakan).

Selanjutnya script yang telah kita temukan (script di atas) kita ganti dengan script baru seperti di bawah ini (script ini dikembangkan oleh Raymond May Jr).
/*
Distributed by http://ariawijaya.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;'>
<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("<data:label.name/>");
</b:loop>
//URLs
var urls = new Array();
<b:loop values='data:labels' var='label'>
urls.push("<data:label.url/>");
</b:loop>
//Counts
var counts = new Array();
<b:loop values='data:labels' var='label'>
counts.push("<data:label.count/>");
</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 != "peek" && x != "forEach" && counts[x] >= minCount)
{
//Calculate textSize
var textSize = min + Math.floor((counts[x]/most) * range);
//Show counts?
if(showCount)
{
var count = "(" + counts[x] + ")";
}else{
var count = "";
}
//Output
document.write("<span style='font-size:" + textSize + "%'><a href='" + urls[x] + "' style='text-decoration:none;'>" + labels[x] + count + "</a></span> " );
}
}
</script>
<br/>
<span style="font-size:80%;float:right;">Supported by <a href="http://ariawijaya.com">Ariawijaya.com</a></span>
</div>
</b:includable>
</b:widget>

Setelah itu coba kita lakukan Preview terlebih dahulu sebelum menyimpannya. Lihat hasil Preview, apakah sudah sesuai dengan harapan atau belum. Jika sesuai maka tampilan widget Tags (Gadget Tags) akan terlihat seperti di bawah ini.

Dalam widget Tags tersebut terlihat tampilan Tag Cloud (berdasarkan Label) mirip seperti Tag Cloud dalam WordPress dimana untuk beberapa Tag tertentu terlihat lebih besar dibandingkan Tags lainnya. Setelah yakin tampilannya muncul seperti yang diharapkan kita bisa menyimpan Templates yang telah kita rubah tadi.
Itu tadi informasi singkat tentang cara membuat Tag Cloud dalam Blogspot, selamat mencoba dan semoga bermanfaat.







December 7th, 2009 at 00:30
[...] Trik Membuat Tag Cloud [...]
May 1st, 2010 at 20:47
Thank’s atas infonya mas and salam kenal yach.
July 4th, 2010 at 10:35
kalau file flas gimana caranya mas?