Cara Membuat Tautan Menyala pada Blog


KURAZONE ~ Salah satu trik untuk mempercantik tampilan Blog agar lebih menarik adalah dengan memberikan kesan MENYALA pada permalink. Contohnya adalah seperti dibawah ini :


Langkah - langkah :

1. Masuk ke Akun Blog anda
2. Pilih Template > Edit HTML
3. Tekan CTRL + F lalu tulis ]]></b:skin> , copy kode CSS dibawah ini lalu paste DIATAS kode ]]></b:skin>
a.murub {
text-decoration:none;
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
transition:all .5s ease-out;
}

a.murub:hover {
color:#fff;
text-shadow:
0px 1px 0px #288433,
0px 0px 3px #288433,
0px 0px 5px #288433,
0px 0px 30px #288433,
0px 3px 50px #288433;
}
4. Simpan

Selajutnya pada saat penulisan kode link, tambahkan class="murub" pada bagian <a>, sehingga kode linknya akan menjadi seperti ini :
<a href="#" class="murub">Teks Anda</a>
Hasilnya akan menjadi seperti dibawah ini : (arahkan kursor pada tulisan "Teks Anda")

Note :
  • Warna default permalink akan otomatis menyesuaikan color link pada template yang kalian gunakan. Apabila ingin mengubah warna default nya, cukup tambahkan kode color='warna yang diinginkan' pada CSS class a.murub
Contoh :
a.murub {color:red;
Hasil :


  • Sedangkan jika ingin mengubah warna link ketika tersentuh kursor, cukup ubah kode color='#fff' pada class a.murub:hover menjadi color='warna yang diinginkan'

Contoh :
a.murub:hover {color:yellow;
Hasil :

  • Sedangkan jika ingin mengubah warna bayangan, cukup ubah kode #288433 pada bagian text-shadow menjadi kode warna yang diinginkan

Contoh :
text-shadow:
0px 1px 0px blue,
0px 0px 3px blue,
0px 0px 5px blue,
0px 0px 30px blue,
0px 3px 50px blue;
}
Hasil :


Kesimpulan

  • a.murub untuk mensetting warna default link
  • a.murub:hover untuk mensetting perubahan warna ketika link terkena kursor
  • text-shadow: untuk mensetting warna bayangan

Nah, sisanya bisa kalian kembangkan sendiri.
Tautan menyala pada Blog ini akan sangat menarik jika digunakan pada template dengan style gelap / dark edition.
Contoh tautan menyala pada tema Gelap :
> Arahkan kursor ke tulisan PERMALINK 1 dan PERMALINK 2
Ini adalah contoh PERMALINK 1 dan PERMALINK 2 yang berada di tema gelap

sumber : http://surochman.blogspot.com






Lebih baru Lebih lama