Cara Membuat Animasi Garis Atas Dan Bawah Pada Link

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 seperti di bawah ini :

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/AVvXsEgQl-VVE4VaWS5Aqa2BUYqcMVmy-Qb38wxUNGCLs1RQxK09rju9y8FUmyvq3jM_b2JnCDNnRzdIkqqE-fzLhTe8N7f5WWqmK6MGDr4fC-VfPwKgXVSwi_vVlGrnj1FqQLg0c8iCgUuhcNA/);
 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/AVvXsEgQl-VVE4VaWS5Aqa2BUYqcMVmy-Qb38wxUNGCLs1RQxK09rju9y8FUmyvq3jM_b2JnCDNnRzdIkqqE-fzLhTe8N7f5WWqmK6MGDr4fC-VfPwKgXVSwi_vVlGrnj1FqQLg0c8iCgUuhcNA/);
 background-repeat: repeat-x;
 background-position: 100% 100%;
 padding-bottom: 3px;
}

</style>

Selamat mencoba dan tetap good luck!