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 anda2. 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
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