Cara Membuat Widget Category atau Label Menggunakan Gambar

Belajar Blog - sudah tahukah anda Cara Membuat Widget Category atau Label Menggunakan Gambar?

widget category atau label anda bisa dibilang akan terlihat profesional dan elegant,seperti yang di pasang oleh para admin website penyedia software gratis misalkan strawberry229.com.

anda bisa langsung saja lihat ke website tersebut,apabila anda tertarik ingin memasangnya widget category atau label seperti strawberry229.com,langsung saja saya beri caranya,

Jangan khawatir widget ini sudah saya atur agar lebih responsive,jadi tidak memberatkan website atau blog anda.

Anda juga bisa mengganti Warna tulisanya tinggal gantikan saja kode warna dengan kesukaan anda,jika bingung dengan kode-kode warna anda bisa pilih disini,Kode Warna HTML

ini dia screenshotnya...

langkahnya :

• Login ke akun Blog anda
• Dasbor > Tata Letak  > Tambahkan Gadget
• kemudian pilih HTML / JavaScript
• beri judul terserah anda mau Category atau label atau apalah sesuka anda
• Selanjutnya masukan script dibawah ini tepat dikolom konten

<div class='widget-content'>

<ul><li><img src="http://i.imgur.com/aaF0b8e.png" rel='dofollow' target='_blank' title='Info - Info Untuk Android' id="icon" />&nbsp;&nbsp; <a dir="ltr" href="http://belajarblogsimple.blogspot.jp/" rel='dofollow' target='_blank' title='Info - Info Untuk Android'>Android</a></li><li><img src="http://i.imgur.com/QFkclRa.png"  rel='dofollow' target='_blank' title='Kumpulan Template Blog SEO Friendly'id="icon" />&nbsp;&nbsp; <a dir="ltr" href="http://belajarblogsimple.blogspot.jp/" rel='dofollow' target='_blank' title='Kumpulan Template Blog SEO Friendly'>Template Blog</a></li><li><img src="http://i.imgur.com/C6lbm1e.png"  rel='dofollow' target='_blank' title='Download File Free'id="icon" />&nbsp;&nbsp; <a dir="ltr" href="http://strawberry229.blogspot.jp/" rel='dofollow' target='_blank' title='Download File Free'>Download Manager</a></li><li><img src="http://i.imgur.com/i6PcwsM.png"  rel='dofollow' target='_blank' title='Free Download Game PC'id="icon" />&nbsp;&nbsp; <a dir="ltr" href="http://strawberry229.blogspot.jp/" rel='dofollow' target='_blank' title='Free Download Game PC'>Games</a></li><li><img src="http://i.imgur.com/JuMn0Ui.png"  rel='dofollow' target='_blank' title='Info - Info Seputar Internet'id="icon" />&nbsp;&nbsp; <a dir="ltr" href="http://strawberry229.blogspot.jp/" rel='dofollow' target='_blank' title='Info - Info Seputar Internet'>Internet</a></li><li><img src="http://i.imgur.com/3C3mVF6.png" rel='dofollow' target='_blank' title='berita terbaru' id="icon" />&nbsp;&nbsp;&nbsp;<a href="http://strawberry229.blogspot.jp/" rel='dofollow' target='_blank' title='berita terbaru'>News</a></li><li><img src="http://i.imgur.com/87ZR8py.png"  rel='dofollow' target='_blank' title='Kumpulan Tips & Trik Lengkap' id="icon" />&nbsp;&nbsp;&nbsp;<a href="http://strawberry229.blogspot.jp/" rel='dofollow' target='_blank' title='Kumpulan Tips & Trik Lengkap'>Tips dan Trik</a></li><li><img src="http://i.imgur.com/H9NaSRt.png" rel='dofollow' target='_blank' title='Info - Info Untuk Komputer Anda' id="icon" />&nbsp;&nbsp;&nbsp;<a href="http://strawberry229.blogspot.jp/" rel='dofollow' target='_blank' title='Info - Info Untuk Komputer Anda'>Komputer</a></li><li><img src="http://i.imgur.com/Ql2OIdd.gif" rel='dofollow' target='_blank' title='Info - Info Untuk Facebook' id="icon" />&nbsp;&nbsp;&nbsp;<a href="http://strawberry229.blogspot.jp/" rel='dofollow' target='_blank' title='Info - Info Untuk Facebook'>Facebook</a></li><li><img src="http://i.imgur.com/hS5PJ3l.png" rel='dofollow' target='_blank' title='Info - Info Untuk Twitter' id="icon" />&nbsp;&nbsp;&nbsp;<a href="http://strawberry229.blogspot.jp/" rel='dofollow' target='_blank' title='Info - Info Untuk Twitter'>Twitter</a></li><li><img src="http://i.imgur.com/ijTa5ce.gif?1" rel='dofollow' target='_blank' title='Belajar HTML Lengkap' id="icon" />&nbsp;&nbsp;&nbsp;<a href="http://strawberry229.blogspot.jp/" rel='dofollow' target='_blank' title='Belajar HTML Lengkap'>HTML</a></li></ul>

Note : 

• Tulisan berwarna Biru yaitu Link gambar anda ( ukuran contoh diatas menggunakan gambar 16x16)
• Tulisan berwarna Hijau yaitu Title ataujudul dari gambar dan link
• Tulisan berwarna Merah yaitu Link tujuan yang akan anda tuju
• Tulisan berwarna Purple yaitu Output atau tulisan yang keluar disamping gambar.

Saya sudah design widget tersebut responsive jadi tetap SEO
Semoga bermanfaat,semoga tampilan blog anda lebih profesional dan terlihat elegant,

Untuk mendesain tampilan blog anda bisa juga anda coba Membuat Related Posts dibawah postingan dengan Thumbnail dan Feedburner.