Gambar/Icon di Samping Tab Navigasi Saat Dilalui Kursor (Hover)

Tutorial kali ini untuk menjawab pertanyaan dari seorang sobat blogger yang memiliki nick "bocahsaico". Yaitu mengenai gambar/icon di samping tab navigasi.

Gambar/icon ini akan muncul ketika kursor melewati link tab navigasi. Sebagai contohnya, lihat tab saya di atas. Saya berguru tutorial ini pada Nurmayanti Zain, meskipun sebenarnya kode template saya berbeda dengan miliknya.

Perlu diketahui bahwa saya menggunakan template bawaan blogger. Jadi jika teman-teman menggunakan template selain blogger, maka kemungkinan kode di bawah ini tidak ada.

Baiklah langung saja ya saya share caranya.

Masuk ke Edit HTML, lalu temukan kode berikut :

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {

Nah, setelah itu, pasanglah kode di bawah ini di BAWAH kode yang di atas tadi.

background:url(http://mob1191.photobucket.com/albums/z476/ayari_165/love-white2.png) no-repeat;

Maka, jadinya akan seperti ini :

 .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {

background:url(http://mob1191.photobucket.com/albums/z476/ayari_165/love-white2.png) no-repeat;

Keterangan :

Warna hijau adalah URL gambar/icon yang ingin digunakan. Anda bisa menggantinya sesuka hati.

Bagaimana ? Mudah kan. Selamat mencoba ya, smoga berhasil :)