Efek animasi yang bisa kita terapkan pada link yang
kita miliki amat beragam modelnya. Entah sudah
berapa efek animasi link yang diposting blog ini,
Sampai Saya sendiripun tidak ingat lagi. Dan hari ini
Saya coba " bagikan " 1 (satu) lagi efek animasi
pada link yang contohnya seperti di bawah ini :
ANIMASI GARIS DI ATAS LINK =
Cara Membuat Tanda Tangan Model Animasi
Cara Membuat Spoiler Di Blog
Membuat Background Pada Postingan
Cara Membuat Recent Comment
Cara Membuat Text Area Berbackground
ANIMASI GARIS DI BAWAH LINK =
Cara Membuat Tanda Tangan Model Animasi
Cara Membuat Spoiler Di Blog
Membuat Background Pada Postingan
Cara Membuat Recent Comment
Cara Membuat Text Area Berbackground
Untuk membuat Efek animasi ini, caranya adalah :
1. Masuk ke Edit HTML.
2. Carilah kode </head>
3. Letakkanlah di atas kode </head>,
kode yang berikut ini :
Kode untuk Animasi Garis di atas link :
<style type="text/css">
a:hover {
text-decoration: none;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-9BKnzhMkjjpxXT5tQ36o4E3JFFlQB8ccAHLgMH0SdmqpGQXinnrAAWqloPVDUtvP-rDDz5OUWRaBBUMoQpkphFWTOslXhFS8ZB0Nf4r1vbBwzc29iEvykiCOlkiXKbOU2weirh0SiSA/);
background-repeat: repeat-x;
background-position: 100% 100% 0% 0%;
padding-bottom: 2px;
}
</style>
Kode untuk Animasi Garis di bawah link :
<style type="text/css">
a:hover {
text-decoration: none;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-9BKnzhMkjjpxXT5tQ36o4E3JFFlQB8ccAHLgMH0SdmqpGQXinnrAAWqloPVDUtvP-rDDz5OUWRaBBUMoQpkphFWTOslXhFS8ZB0Nf4r1vbBwzc29iEvykiCOlkiXKbOU2weirh0SiSA/);
background-repeat: repeat-x;
background-position: 100% 100%;
padding-bottom: 3px;
}
</style>
Selamat mencoba dan tetap good luck!
0 komentar:
Posting Komentar