Membuat Link Hover Bergaris Atas dan Bawah Otomatis Pada Blog

Garis biasanya digunakan untuk sebuah tanda, ternyata garis dapat juga anda buat di link blog anda intuk menandakan bahwah text tersebut terdapat link aktif yang bisa menuju kehalaman lainnya. Membuat garis pada link di Blog merupakan salah satu pernak-pernik blog untuk menambah mempercantik blog.

Untuk membuat Line atau garis pada link, cukup mudah kok sobat hanya sedikit penambahan pada kode CSS, berikut langkah-langkahnya :

1. Login ke akun blogger
2. Pilih Template ==> klik Edit html
3. Dengan menggunakan Ctrl+F anda cari kode ]]></b:skin>
4. Kemudian cari kode a:hover{

After :

a:hover {
  color:#7FB7FD;
  -moz-transition:all .2s ease-out;
  -o-transition:all .2s ease-out;
}

4. Jika sudah anda sisipkan kode text-decoration:underline;

Before :

a:hover {
  color:#7FB7FD;
  -moz-transition:all .2s ease-out;
  -o-transition:all .2s ease-out;
text-decoration:underline;
}

Penjelasan :
>> text-decoration:underline; untuk link garis bawah, jika anda ingin mengganti dengan garis atas anda ganti dengan text-decoration:overline;
>> color:#7FB7FD; adalah pengaturan warna liuk
>> Pada setiap template Blog kode a:hover berbeda-beda anda coba saja pada kode yang terdapat kode a:hover

Sekian trik dan tips sederhana dari saya Membuat Link Hover Bergaris Atas dan Bawah Otomatis Pada Blog, semoga bermanfaat!

Share this post