Google+ Facebook Twitter YouTube RSS Feed

Memberi Rainbow Effect (Efek Pelangi) Pada Link Hover  

Diposting oleh eNeS

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://enes-sc.googlecode.com/files/rainbowlink.js'/>

  • Kemudian Login ke blogger.
  • Dari halaman Dashboard klik Tata Letak dan pilih Edit HTML.
  • Letakkan script tadi di bawah kode <head> yang letaknya ada di barisan awal. Atau bisa juga kamu letakkan di bawah kode ]]></b:skin>.
  • 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...

Sumber: SC Community's Blog

Ikon ini merupakan link ke situs bookmark sosial dimana pembaca dapat berbagi dan menemukan halaman web baru.
  • Digg
  • Delicious
  • StumbleUpon
  • Technorati
  • Yahoo!
  • Google+
  • Facebook
  • Friendster
  • Twit This!
  • Mixx
  • Furl
  • Reddit
  • Spurl
  • Diterbitkan Minggu, Mei 29, 2011 dengan ketegori .
    Merupakan suatu kehormatan bagi saya jika anda bersedia meninggalkan jejak komentar pada blog Jeans Belel yang seadanya ini.
    Langganan: Posting Komentar (Atom)

    0 komentar

    Posting Komentar