Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Merubah tampilan hover link

Hover yang sering dipergunakan pada sebuah blog, umumnya hanya berupa perubahan warna teks ketika cursor menyentuh link. Dengan melakukan modifikasi pada KODE css yang terdapat pada template, hover bisa kita rubah sehingga ketika cursor menyentuh link, maka tidak hanya warna teks saja yang berubah. Beberapa KODE tambahan, seperti background, border, style teks dan ukuran font mampu memberikan nuansa yang berbeda ketika sebuah link tersentuh oleh cursor.

Sebuah demo di bawah ini bisa sebagai contoh bentuk hover link yang coba kita buat.
Jika pada contoh ini background pada link langsung bekerja tanpa berdasar fungsi hover dikarenakan hanya dibuat pakai kode html tanpa bantuan kode css dan css3. Yanga akan kita buat nanti hasilnya akan jauh lebih menarik dibandingkan contoh di bawah ini.

D E M O

Link baru akan terlihat seperti ini!

Cara merubah tampilan hover pada link:
  1. Login ke Blogger.
  2. Halaman Dasbor (Dasboard).
  3. Klik Rancangan (Design).
  4. Klik Edit HTML.
  5. Lakukan Backup template dengan klik Download Template Lengkap (Download Full Template).
  6. Simpan file template di folder PC.
  7. Tetap di Edit HTML
  8. Cari kode css seperti yang terlihat di bawah ini.
    Kode CSS ini harus di rubah:
    a:hover {
      text-decoration:underline;
      color: $(link.hover.color);
    }
  9. Kode CSS di atas mungkin tak akan sama persis dengan yang ada di blog namun yang terutama perlu diperhatikan adalah pada syntax-nya (a:hover).
  10. Ganti kode di atas dengan kode css berikut:
    Kode CSS pengganti
    a:hover {
           background: url(http://gubhugreyot-images.googlecode.com/files/gubhugreyot-bghover-link-anima.gif);
           padding:2px 4px;
           color:#f00;
           tansition:1s;
           -o-tansition:1s;
           -moz-tansition:1s;
           -webkit-tansition:1s;
           -ms-tansition:1s;
           text-decoration:none;
           font-style:oblique; 
    }
  11. Klik Simpan Template (Save Template).

Keterangan/Catatan :
  • KODE a:hover terletak sedikit di bawah KODE <head>
  • Apabila menghendaki background-image yang berbeda, gantilah URL dengan URL dari gambar yang lain.
  • color = warna font.
  • obligue bisa digantikan dengan normal, italic atau inherit.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :



Update » Senin PAHING, January, 30, 2012

» Happy Blogging - gubhugreyot «

Bila tak pegal di tangan
silahkan tulis sebuah komentar!

gubhug reyot

 
GR | Edited by | gubhug reyot