Pernah
menggunakan Efek Link Pelangi di Blog anda? Tutorial kali ini mempunyai
bentuk yang hampir mirip dengan Efek Link Pelangi tersebut, namun
bedanya, disini anda tidak perlu menggunakan javascript apapun atau
dengan kata lain tutorial kali ini tidak akan mempengaruhi beban
loading blog anda. Disini saya akan membaginya ke dalam 3 bentuk, yaitu
link untuk keadaan biasa(sebelum di klik), link untuk yang sudah pernah
dikunjungi dan link yang hanya berupa hover.
Untuk membuatnya silahkan ikuti panduan dibawah ini:
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:
*Untuk Mengganti link dalam keadaan biasa(sebelum diklik) cari kode:
a:link
*Untuk Mengganti Link yang sudah pernah dikunjungi cari kode:
a:visited
* Untuk Mengganti Link yang hanya berupa Hover(sama dengan Blog yang saya jadikan Demo) cari Kode:
a:hover
Setelah itu silahkan taruh Script dibawah ini tepat sebelum } atau kurung kurawal tutup:
text-shadow: 1px 1px 1px #FF8000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
Atau untuk lebih jelasnya silahkan perhatikan contoh dibawah ini:
Untuk link biasa
a:link {
color: #EBB483;
text-decoration:none;text-shadow: 1px 1px 1px #FF8000; font-family: Arial, Helvetica, sans-serif; font-weight: bold;
}
Untuk Link Yang dikunjungi
a:visited {
color: #EBB483;
text-decoration:none;text-shadow: 1px 1px 1px #FF8000; font-family: Arial, Helvetica, sans-serif; font-weight: bold;
}
Untuk Link yang hanya hover
a:hover {
color: #EBB483;
text-decoration:underline;text-shadow: 1px 1px 1px #FF8000; font-family: Arial, Helvetica, sans-serif; font-weight: bold;
}
Keterangan: Yang saya beri warna merah adalah Kode yang ditambahkan, sedangkan warna biru adalah warna text shadownya.
5. Save Template dan Lihat Hasilnya..