Membuat Widget Kategori Tertentu Dengan Thumbnail

Menurut terminologi bahasa Kategori/Label adalah bagian dari sistem klasifikasi (Golongan, Jenis perangkat, Negara, dsb). Kategori/Label yang berasal dari bahasa Inggris mempunyai makna deskripsi singkat yang diberikan untuk tujuan identifikasi. Kategori/Label merupakan penanda mengidentifikasi atau deskriptif yang melekat pada suatu objek. Itulah sedikit tentang Arti kata Kategori/Label, kembali pada inti pembahasan artikel.

Pasti Anda sering menjumpai widget perlabel seperti inikan baik itu pada blog Personal maupun blog magazine, widget ini berfungsi untuk mengelompokkan label tertentu agar lebih membantu pengunjung blog untuk mencari kategori-kategori yang ada pada web maupun blog Anda dengan mudahnya.

Baiklah, kita langsung saja pada langkah-langkah pembuatannya :

Pertama letakkan code berikut ini tepat di atas ]]></b:skin>

img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px} img.label_thumb:hover{background:#f7f6f6} .label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0} ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}

Kedua, Letakkan Code JavaScript dibawah ini tepat diatas </head>

Semiga bermanfaat.

<script src='http://fianetmucode.googlecode.com/files/labels.js' type='text/javascript'></script>

Keterangan : Numposts =6 adalah jumlah postingan yang akan ditampilkan sedangkan Tutorial ganti dengan nama label pada blog Anda.

Jika ingin menambahkan Selengkapnya tambahkan script di bawah ini tepat di bawah code pemanggilnya di atas

<a href="URL LABEL" style="float:right;font:normal 11px Coda;padding:5px 0;" title="Selengkapnya">Selengkapnya &#187;</a>

Keterangan : Ganti URL LABEL dengan Url Pada Label Anda.

Semoga bermanfaat