Pernah berkunjung ke Flickr yang sekarang sudah diakuisisi oleh tim Yahoo-nya Jerry Yang dan Adam Pahlevi? Hem… kalau pernah, coba deh kita hover-kan (arahkan) mouse kita kesalah satu link-nya. Dan… what’s happen? link-nya akan berefek sangat cantik, memiliki Font BackGround juga FontColor yang bagus.

Dan… akhirnya kita bertanya mengapa linknya bisa berwarna dengan BackGround seperti itu. Kan secara default, hanya decorasi font-nya saja yang berubah, yakni dengan adanya garis bawah. Lalu… bagaimana cara untuk mengubah hover menjadi seperti di Flickr?

Begini… itu semua hanya permain CSS. Maaf, sebetulnya penulis sudah mengetahui ini sejak lama, namun tidak ‘kepikiran’ untuk mempostingnya. Maaf, jika penulis memberitahukan agak telat. Pepatah Enggres mengatakan bahwa:

Better late than never atau bahasa Indonesianya Lebih baik terlambat daripada tidak sama sekali, atau Lue apik telat ketimbang gak tau blas, dalam bahasa jawa.

Hack ini bisa kita aplikasikan dengan baik di Blogger pun WordPress. Jika di Blogger, kita tinggal masuk Edit HTML. Dan jika di WordPress (versi 2.5), kita bisa masuk ke Design Theme Editor dan pilih Stylesheet (style.ccs), biasanya di WordPress, Theme Editor langsung mereferensi pada file satu ini.

Lalu? What’s the next step? kita cari kode CSS a:hover pada bagian CSS kita (baik di Blogger dan WordPress), biasanya, kode CSS a:hover berbentuk seperti ini di WordPress:

a:hover {
color : #ff7400;
}

dan juga seperti ini di Blogger:

a:hover {
color:$titlecolor;
text-decoration:none;
}

namun pada dasarnya tidak berbeda, baik di Blogger juga di WordPress Kode CSS a:hover baik di Blogger dan di WordPress dapat digunakan di satu sama lain. Tanpa ada masalah (Kecuali jika kode CSS tersebut memiliki Value Name, yang mana Value Name ini hanya berlaku di Blogger, contoh valuename: $titlecolor;, $titlefontcolor;, $posttitle; dan lain-lain yang diawali dengan $ dan diakhiri dengan
Selanjutnya, kita tambahi kode berikut di CSS a:hover kita dengan tambahan kode hover background, misalnya warna yang bagus: background-color: #FADADD;, sehingga kode CSS-nya menjadi seperti ini di WordPress:

a:hover {
color : #ff7400;
background-color: #FADADD;
}

dan ini di Blogger:

a:hover {
color:$titlecolor;
text-decoration:none;
background-color: #FADADD;
}

Bagaimana? bingung? tidak kan? baik, lalu, dari mana kita bisa tahu kode CSS dari setiap warna-warna yang ada? itu gampang! cari kodenya disini

Popularity: 2% [?]

Related Content

Subscribe to the post comments feeds or Leave a trackback