Scrollover, cara baru membuat efek link hover

Buat anda yang sudah tidak sabar menunggu trik yang saya janjikan di posting sebelumnya yaitu Trik baru membuat link hover cantik, maka pada posting kali ini saya akan memberikan trik tersebut. Sebetulnya ada beberapa macam dekorasi link ini dan pasti sudah banyak yang tahu, diantaranya ada efek blink, rainbow atau berganti-ganti warna, berubah warna apabila di sorot kursor mouse, berubah huruf dan lain-lain. Perbedaan dari scrollover ini yaitu sebuah link akan bergulung dari atas kebawah sekaligus berganti warna. Untuk warna anda dapat menyesuaikan sendiri sesuai dengan keinginan anda.
Lalu bagaimana triknya? Silahkan ikuti langkah-langkah berikut:

Login ke dashboard blogger anda, lanjutkan dengan klik Layout – Edit HTML. Jangan lupa untuk membackup template anda sebelum melakukan perubahan pada kode HTMLnya.
Cari kode <head> pertama pada template dan tambahkan kode berikut dibawahnya:



Setelah itu cari kode ]]></b:skin> dan tambahkan kode berikut diatasnya:

<style>
a.scrollover {

/* Warna pertama */
color: #557AFF;
}
a.scrollover em:first-line {
/* Warna kedua */
color: #FF5B3C;
}
</style>

Contoh hasilnya seperti ini : HOME

Sesuaikan warna dengan selera anda. Untuk kode-kode warna dapat dilihat disini. Setelah anda menambahkan kode-kode diatas pada template anda, sekarang anda sudah dapat menggunakan efek scrollover tersebut. Jika anda membuat link biasa baik dalam posting atau membuat daftar link di sidebar dengan menggunakan HTML/Java script maka kodenya akan seperti ini:



Dan jika anda ingin menggunakan efek scrollover maka kodenya seperti ini:



Sebetulnya efeknya masih bisa diatur misalkan anda ingin mengatur kecepatan scroll ataupun arah scrollnya, tapi mungkin akan sedikit rumit karena anda harus mendownload scriptnya lalu mengedit dan mengupload kembali ke hosting anda sendiri. Untuk itu saya tidak akan menjelaskannya. Jika anda tidak berhasil atau ada masalah silahkan kontak saya baik melalui komentar ataupun shoutbox, selamat mencoba..

Update : Setelah saya cek dengan Internet Explorer ternyata trik ini tidak bekerja. Untuk Firefox dan Chrome tidak ada masalah

Artikel terkait:



14 Komentar:

JT said...

hehe1000x. tah geuning kaluar JURUSNYA.
kirain cuma GOSIPPPPF. sipp lah ntar di coba....
thanks

andro_simar said...

mantep sharenya sob,, tengyu,, :D

NURA said...

salam sobat..wah info ok,,saya pingin mencoba juga ah,,biar tambah cantik ya blognya kalau buat link hover ini.

Rumah Idaman VS Rumah Impian said...

we're not only blogreading but we share about it...salam hangat gan...

wah baru tahu saya sob.. mkasih infonya yah.. lam kenal


akhirnya selesai juga postingan berat ini ....
btuh dukungan lagi nee juragan... hahahah....
salam sayang ... ku berharap kau blom tiduur....
http://apocalytyo.blogspot.com/2009/08/rumah-idaman-vs-rumah-impian.html

hill said...

tipsnya mantabbb kawann :) thnxss yaaaa

genial said...

saiia dari dulu pingin punya yg kek gini... ntar mlm saiia akan mejengin scroll bginian kang :thumbsup:

mangstabs surantabs bagi2nya kang :thumbsup: semangaddhhh!!!! merdeka!!!

JT said...

walah222 pengen coba tp masih di HUTAN ni. ke we nya kang

irvan said...

sip tipsnya, ah mang dari dulu si IE begitu aneh sendiri, ga standart makanya mualessss pakenya

ninit said...

wah tips nya baguss.. berguna banget buat blog saya

:)

Kocak said...

wah keren banget sob... buat wordpress gmn nih? apakah sama?

imam said...

Mantap sob ilmunya!!
Thanks ia!

Beben Koben said...

ribet...cuman hover doang kok ribet (ada yg simble caranya)...hihihihihi

Beben Koben said...

eh simple...saltik, klo model rainbow kan cuma tinggal add JS doang, nggak pake acara2 ngedit css-nya hohohoho

BRAM IRIANTO said...

Demak, 28 Desember 2009, Jam : 07.45 WIB

Saya informasikan bahwa langkah-langkah untuk membuat link hover sudah saya laksanakan, tetapi hasilnya masih gagal terus, tolong saya di berikan penjelasan lagi mungkin saja terjadi kesalahan.
Salam hangat,
BRAM IRIANTO
http://www.kencangratis.blogspot.com/Menjalankan iklan AdSense

Post a Comment

Silahkan tinggalkan komentar anda, setiap komentar yang anda tulis akan menambah jumlah backlink anda.
Sebaiknya gunakan Name/URL pada saat menuliskan komentar.

Template Design by Eris Agustian - Digital Life | Professional Blogger Template