.jpg)
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.
Link baru akan terlihat seperti ini!
Update » Senin PAHING, January, 30, 2012
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:
- Login ke Blogger.
- Halaman Dasbor (Dasboard).
- Klik Rancangan (Design).
- Klik Edit HTML.
- Lakukan Backup template dengan klik Download Template Lengkap (Download Full Template).
- Simpan file template di folder PC.
- Tetap di Edit HTML
- Cari kode css seperti yang terlihat di bawah ini.
Kode CSS ini harus di rubah:
a:hover { text-decoration:underline; color: $(link.hover.color); }
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).
- 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; } - 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 «
silahkan tulis sebuah komentar!
gubhug reyot