BLOGGER TEMPLATES AND TWITTER BACKGROUNDS »

Selasa, 26 Januari 2010

Peace Memberi Rainbow Effect (Efek Pelangi) Pada Link Hover

Pada setiap template blog memiliki bentuk tampilan link (tautan) yang berbeda-beda. Ada yang menggunakan bentuk garis bawah (underline), warna, ada pula yang menggunakan bentuk perubahan huruf. Setiap kali kita ingin mengubah bentuk warna atau huruf dari link tersebut, kita akan direpotkan dengan pencarian letak dimana kode link untuk title, posting, comments, widget, dan footer, tersebut berada. Ini cukup memakan waktu, bahkan bagi mereka yang belum faham betul �bahasa� HTML akan berakibat fatal, yaitu rusaknya template. Nah, sebenarnya ada cara mudah untuk mengubah bentuk tampilan warna pada link hover ini (klik untuk melihat contoh). Tapi sebelumnya akan dijelaskan dulu mengenai bentuk tampilan link, khawatir para blogger pemula belum mengerti (Sok tauk ya?! Hehe...).

Ada tiga bentuk tampilan link yang biasa terdapat pada script HTML template blog, yaitu: link active, link visited dan link hover.

* Link active, adalah bentuk tampilan link ke suatu URL tertentu yang masih belum diklik untuk dikunjungi.
* Link visited, adalah bentuk tampilan link yang sudah diklik untuk dikunjungi. Link ini akan kembali ke bentuk active jika kamu menghapus riwayat (history) pada internet explorer, atau jika kamu membuka situsnya di komputer lain.
* Link hover, adalah bentuk tampilan link apabila didekati oleh mouse pointer.


Sampai sini sudah jelas kan? Nah, sekarang baru kita bicara bagaimana memberi rainbow effect (efek pelangi) pada link hover, supaya link pada blog kamu, apabila didekati oleh mouse pointer, akan berubah-ubah warna seperti pelangi. Untuk memberi efek pelangi pada link hover ini sebenarnya cukup mudah, kamu bisa mengikuti langkah-langkah berikut :

* Kopi script berikut :
<script src='http://sites.google.com/site/ruangsc/enes/rainbowlink.js'/>
* Kemudian Login ke blogger.
* Dari halaman Dashboard klik Tata Letak dan pilih Edit HTML.
* Letakkan script tadi (yang sudah dikopi) di bawah <head> (sebaiknya di bawah <title><data:blog.pageTitle/></title>), yang letaknya ada di barisan awal script.
* Dont forget, save hasil kerjaan kamu.


Untuk melihat hasilnya, coba kamu buka blog kamu dan dekatkan mouse pointer kamu ke kata/kalimat yang memakai link. Apa yang terjadi? Wow... my link hover have rainbow effect (hehe... ngenglish deui saeutik).
Nah, gampang kan? Ok coy, selamat mencoba...

0 komentar: