Membuat Shadow pada Link Hover
Label : Blogspot, CSS, Tutorial
Mungkin akang dan teteh sudah mengetahui tentang macam-macam style link menggunakan CSS, agar mempercantik tampilan atau berbeda dengan yang lain.
pada kesempatan kali ini info-cupu aka membahas pembuatan "link hover shadow".
link hover adalah style link ketika suatu link di arahkan cursor mouse , maka akan berubah menjadi warna sesuai links hover menggunakan CSS. seperti Blog Info-cupu ini menggunakan
link hover shadow
Cara membuat link hover shadow style pada Blogspot :
1. Login to Blogger kemudian pilih "Layout" atau "Rancangan"
2. Klik pada "Edit HTML" dan berikan tanda checklist "Expand Template Widget"
3. Cari Kode ini (biasakan menggunakan shortkey ctrl+f, untuk memudahkan pencarian karakter pada browser)
Biasanya letak code tersebut berada di paling atas !!
inputkan kode CSS ini atau akang dan teteh bisa menambahkan kode css ini :
caranya sama.. hanya saja meletakannya di dalam kode CSS , contohnya :
Sekian tutorial dari info-cupu ...semoga berguna!!
pada kesempatan kali ini info-cupu aka membahas pembuatan "link hover shadow".
link hover adalah style link ketika suatu link di arahkan cursor mouse , maka akan berubah menjadi warna sesuai links hover menggunakan CSS. seperti Blog Info-cupu ini menggunakan
link hover shadow
Cara membuat link hover shadow style pada Blogspot :
1. Login to Blogger kemudian pilih "Layout" atau "Rancangan"
2. Klik pada "Edit HTML" dan berikan tanda checklist "Expand Template Widget"
3. Cari Kode ini (biasakan menggunakan shortkey ctrl+f, untuk memudahkan pencarian karakter pada browser)
a:hover { ....
.... ;}
Biasanya letak code tersebut berada di paling atas !!
inputkan kode CSS ini atau akang dan teteh bisa menambahkan kode css ini :
text-decoration:none;color:#000;text-shadow:0 0 10px #FFFSehingga menjadi seperti ini :
a:hover { text-decoration:none;color:#000;text-shadow:0 0 10px #FFF };Cara membuat link hover shadow style pada web :
caranya sama.. hanya saja meletakannya di dalam kode CSS , contohnya :
<style type='text/css'>
body {
color: #FFFFFF;
background:#232323;}
a,a:visited{padding:0;margin:0;color:#ffffff;text-decoration:none}a:hover{text-decoration:none;color:#000;text-shadow:0 0 10px #FFF}
</style>
<div align="center"><a href="#">Membuat Shadow Link Hover</a></div>
Sekian tutorial dari info-cupu ...semoga berguna!!
Penulis : Rahman Surya Praja a.k.a [+] vir0e5
"Ikatlah Ilmu Dengan Tulisan Dan Amalkanlah!!"
"Ikatlah Ilmu Dengan Tulisan Dan Amalkanlah!!"
Sample Widget
Links
Links
test
0 komentar