Cara membuat garis di bawah link dan background 3D
Garis di bawah link contohnya seperti di blog aku ini kalau cursor menyentuh link akan keluar border dashed dan link juga ada background 3D nya yang berkelip-kelip itu memakai CSS 3. Sekarang aku memberikan kodenya berbagi kepada anda semua.
Cara membuat garis di bawah link dan background 3D
Masuk dashboard > template > edit HTML > tekan tanda '►' yang paling atas <b:skin>...<b:skin>
Cari kode a:hover { paling atas di bawah /* content (bukan di bawah persis xD)
copy paste code di bawah ini atau jadinya seperti:
a:hover {
color:#FF95CA;
border-top:dashed 2px #FF9D6F; <---border/garis di atas text link
border-bottom:dashed 2px #FF9D6F; <---border/garis bawah text link
-webkit-transition-duration: 1.30s;color:#000;background:url(URL BACKGROUND);
background-position:50% 80%;background-size:100px;
}
Yang aku tandai dengan warna-warna itu boleh ditukar sendiri hanya perlu mencari kode warna dan jenis border, bisa diubah bordernya menjadi dotted, solid, etc juga ukuran px nya. Kalau hanya ingin menaruh garis di bawah link taruh yang border-bottom saja, sesuai keinginan.
Butuh url background? boleh mencarinya disini:
glitter-graphics-gallery
klik pada gambar/background yang anda inginkan dan ambil kodenya, contoh:
<a href="http://www.glitter-graphics.com"><img src="http://dl9.glitter-graphics.net/pub/556/556879htnje9w9da.gif" width=120 height=90 border=0></a>
ambil kode yang aku tandai dengan warna merah dan masukkan ke URL BACKGROUND pada kode di atas.
Kalau semua kerja sudah selesai, simpan template, silahkan mencoba.
Post a Comment for "Cara membuat garis di bawah link dan background 3D"