Hover anu sering dipake dina hiji blog,umumna ngan mangrupi parobahan kelir teks sabot cursor nyabak link. Kalawan ngalakukeun modifikasi dina KODE css anu aya dina template,hover tiasa urang robih ku kituna sabot cursor nyabak link,mangka henteu ngan kelir teks wae anu robih. Sababaraha KODE tambahan,sepertos background,border,style teks sarta ukuran font sanggem mikeun nuansa anu benten sabot hiji link tersentuh ku cursor.
Hiji demo handap ieu tiasa contona wangun hover link anu cobi urang kanggo.
Lamun dina conto ieu background dina link langsung didamel tanpa dumasar kadudukan hover dimargikeun ngan didamel anggo kode html tanpa bantuan kode css sarta css3. Yanga bade urang kanggo antos hasilna bade tebih langkung metot dibandingkeun conto handap ieu.
Link baru akan terlihat seperti ini!
Update » Senin PAHING, January, 09, 2012
Hiji demo handap ieu tiasa contona wangun hover link anu cobi urang kanggo.
Lamun dina conto ieu background dina link langsung didamel tanpa dumasar kadudukan hover dimargikeun ngan didamel anggo kode html tanpa bantuan kode css sarta css3. Yanga bade urang kanggo antos hasilna bade tebih langkung metot dibandingkeun conto handap ieu.
D E M O
Link baru akan terlihat seperti ini!
Cara ngarobah tampilan hover dina link:
- Login ke Blogger.
- Halaman Dasbor (Dasboard).
- Klik Rancangan (Design).
- Klik Edit HTML.
- Lakukeun Backup template jeung klik Download Template Lengkep (Download Full Template).
- Simpen file template di folder PC.
- Tetep di Edit HTML
- Teangan kode css sapertos anu katingali di handap iyeu.
Kode CSS ieu kedah di robih:
a:hover { text-decoration:underline; color: $(link.hover.color); }
Kode CSS di luhur manawi moal sami persis kalawan anu aya di blog nanging anu utamana peryogi diperhatikeun nyaeta dina syntax-na (a:hover).
- Gentos kode di luhur kalawan kode css katut:
Kode CSS gentosna
a:hover { background: url(https://sites.google.com/site/mitrabewara/images/mitrabewarasunda-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 Simpen Template (Save Template).
Katerangan/Catetan :
- KODE a:hover cinekna saeutik di handapeun KODE <head>
- Lamun mikahayang background-image anu benten,ganti wae URL kalawan URL ti gambar anu sanes.
- color = warna font.
- obligue bisa digantikan dengan normal, italic atawa inherit.
Mangga oge buka Tutorial sejen nu narik pisan sarta pantes di turutan kabeh. Akses ngaliwatan link handap ieu :
Update » Senin PAHING, January, 09, 2012
» BEWARA SUNDA - mitrabewarasunda «
