MOHON PERHATIAN!!!........ Sehubungan sedang "ERROR"nya situs HTTP://WWW.RIPWAY.COM, maka bila Anda menemukan tutorial yang menggunakan kode dengan nama situs tersebut, sementara waktu JANGANLAH Anda gunakan. Mohon maaf, semoga anda memakluminya.............................

Mengucapkan Selamat Datang, Semoga Dapat Berkenan Di Hati Anda



SYAMSUDINNAMAKU telah hadir

KUNJUNGI CHANNEL YOUTUBE SAYA

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!


0 comments:

Posting Komentar