Menggunakan Efek CSS3 Text Shadow Untuk Link Blog(Link state, Hover state, Dan Active State

Daftar Isi

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 Demonya silahkan KLIK DISINI dan arahkan kursor anda ke salah satu link di blog tersebut, atau lihat gambar diatas.

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

Mudah bukan?