Jumat, Juli 13, 2012

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 :)

26 komentar:

  1. itu bukannya warna biru. wes yg penting menger dih... bagusna tutorialmu.. mancaapp

    BalasHapus
    Balasan
    1. hahay, iya dih, td jg sbnrnya bingung itu spt biru kehijau2an bela -__-"
      tp sdh kuganti, biar nda bingung :D

      Hapus
    2. nischuuuuu sudahmi kubikin..aneh2na kaue..cek dule benarmi tidak

      Hapus
  2. WAAAH !! Dibuatin beneran tutornyaaaaaa :3
    makasiiiiiiiiii :D
    coba aaaaaah~

    BalasHapus
  3. ijin mencoba ingin tahu perubahannya
    :)

    BalasHapus
  4. owh mudah ternyata yah, kapan kapan nyoba deh, trims

    BalasHapus
  5. wah baru tahu, nntar coba ah....
    thanks untuk tutorialnya ^^

    BalasHapus
  6. waaah kerenn ntar saya coba mbak.. :))
    Mbak Nhinis dapet tag dari saya, cek ya
    http://nurraniima.blogspot.com/2012/07/tag-from-arisa.html

    BalasHapus
  7. Templateku bukan bawaan blogger, Nhis! Tp biar ku uprek dulu siapa tau bisa! Ur tutor are great! B-)

    BalasHapus
    Balasan
    1. Iy, coba aja dlu ya. Klo ga berhasil coba tanya maya, dia templatenya jg bukan dari blogger, tp bisa.

      Hapus
  8. wah jago programmer juga ya, haha :D

    btw, follbek ya kak

    www.linuxku.com

    BalasHapus
    Balasan
    1. Sy bukan programmer zal. Cara diatas jg stlah berguru sama tmn. Jadi sy share :)

      Hapus
  9. Balasan
    1. Aduh, aq ga tau klo WP mba >.<
      coba cek di mr.G :)

      Hapus
  10. ke tkp dulu aaaah.. :)
    trima kasih tutorialnya :D

    BalasHapus
    Balasan
    1. Semoga berhasil. Trimakasih kunjungannya :)

      Hapus
  11. Pinter juga kamu Nhinis memainkan css sama template. Jadi yang di maksud tab inner itu bagian laman. Jadi tambah pengetahuan ane mbak. Terus gali yang belum terpecahkan mbak.

    BalasHapus
    Balasan
    1. Nebak-nebak aja sih :D
      Smoga manfaat...

      Hapus
  12. salam sukses gan, bagi2 motivasi .,
    nikmatilah hidupmu agar kamu tidak merasa bosan dalam setiap keadaan.,.
    ditunggu kunjungan baliknya gan .,.

    BalasHapus
  13. ini nyari gambarnya di google pake keyword apa kak? mau nyoba yang lain :)

    BalasHapus
    Balasan
    1. Bilang aja icon, atau cute icon gitu.. :)

      Hapus

Jangan lupa tinggalkan jejak ya
Trimakasih...