Kamis, 21 Juli 2011

Funky Hover on Link

Jangan yang berat-berat terus ah postingannya, nanti sobat pada mabok ngikutinnya. Rehat sejenak dari artikel para master blog, kita seling dengan postingan simple dan hangat hasil merenung 2500 tahun :D
Jika ada dari kalian para sobat memperhatikan pada single post (halaman post full) pada blog aneh ini, akan terlihat hover bertuliskan #Bloglang™ di sisi kanan title posted satu lagi dibagian komentar dengan judul #comments-count :P Kali ini bukan mau nerangin cara buat yang kayak 'ntuh, more extreme buat link jika disorot akan nampak link tujuannya! Keterangan membingungkan pastinya, abis Beben juga puyeung mau neranginnya gimana :D Demo saja deh, perhatikan link & sorot ama sobat ;)

Klik buat mengambil link demo!

Pasti sudah terbayang what i'm talking about funky hover on link b-) Caranya juga cukup gampang, lihat and perhatikan unique ID bagian post template kalian masing²
Biasanya .post-body, .post-wrap, .post-crot or else. Sisipkan didalam variabel unique ID post sobat dengan variabel berikut. Berikut susunan kode-kode...
#uniqueID-post a:hover:after {
content: " Page: (" attr(href) ") ";
color: #b50010;
background: #f4f4f4;
margin: 0 5px;
text-decoration: underline;
}
#uniqueID-post a:active {
background: #FFFFFF;
color: #000;
}
#uniqueID-post bisa juga .uniqueID-post (# .) <=- ID or class that's mean! Tidak masalah yang penting variabel masuk semuanya ;))
Menuliskan link seperti biasa maka nanti akan langsung terlihat efek seperti di demo. Semoga bermanfaat :)
Happy blogging \m/

Tidak ada komentar:

Posting Komentar