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 :

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/AVvXsEhxrZGx6qeW3b9WYKFH-tD9JYjaI6az5MvUFzrLpzllgXu4Rx1ZyLrInt0qUeudA5b9a1oZ573QBPWEJLobtpB9htAqVnZr8dF7wPmKh8fcmKaEoEiZ0d7ZCxaEYfBgnI4swsTwG2hTYzc/);
 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/AVvXsEhxrZGx6qeW3b9WYKFH-tD9JYjaI6az5MvUFzrLpzllgXu4Rx1ZyLrInt0qUeudA5b9a1oZ573QBPWEJLobtpB9htAqVnZr8dF7wPmKh8fcmKaEoEiZ0d7ZCxaEYfBgnI4swsTwG2hTYzc/);
 background-repeat: repeat-x;
 background-position: 100% 100%;
 padding-bottom: 3px;
}

</style>

Selamat mencoba dan tetap good luck!