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..
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
14 Komentar:
hehe1000x. tah geuning kaluar JURUSNYA.
kirain cuma GOSIPPPPF. sipp lah ntar di coba....
thanks
mantep sharenya sob,, tengyu,, :D
salam sobat..wah info ok,,saya pingin mencoba juga ah,,biar tambah cantik ya blognya kalau buat link hover ini.
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
tipsnya mantabbb kawann :) thnxss yaaaa
saiia dari dulu pingin punya yg kek gini... ntar mlm saiia akan mejengin scroll bginian kang :thumbsup:
mangstabs surantabs bagi2nya kang :thumbsup: semangaddhhh!!!! merdeka!!!
walah222 pengen coba tp masih di HUTAN ni. ke we nya kang
sip tipsnya, ah mang dari dulu si IE begitu aneh sendiri, ga standart makanya mualessss pakenya
wah tips nya baguss.. berguna banget buat blog saya
:)
wah keren banget sob... buat wordpress gmn nih? apakah sama?
Mantap sob ilmunya!!
Thanks ia!
ribet...cuman hover doang kok ribet (ada yg simble caranya)...hihihihihi
eh simple...saltik, klo model rainbow kan cuma tinggal add JS doang, nggak pake acara2 ngedit css-nya hohohoho
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.