Cumulus swf - flash

Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

MouseOver with Simple CSS

Mouse over dengan css ini sebenarnya menggunakan prinsip rollover.Jadi gambar di bawah bukanlah sebuah sulap atau animasi gif tetapi merupakan gambar dengan dua obyek yang yang berdampingan. Melalui serangkaian css, maka ketika cursor berada di atas gambar, gambar akan bergeser secara cepat untuk menampilkan gambar di sisi kanan. Untuk mendapatkan effect yang sempurna atau dengan ukuran gambar berbeda hanya perlu dilakukan perubahan lebar (width) dan tinggi (height) pada KODE CSS dan obyek yang ditampilkan. Untul lebik jelasnya anda bisa mendownload gambar di bawah beserta KODE CSSnya.


Cara menggunakan KODE css mouseover effect

Simpan KODE CSS berikut di dalam template pada bagian head atara di antara <head> dan </head>

Kode CSS :
#mouseover a{
       text-decoration : none; 
       display:block; height:167px; 
       width:179px; overflow:hidden; 
       opacity:0.5;
       filter:alpha(opacity=50);
}
#mouseover a:hover{ 
       text-decoration : none; 
       display:block; 
       text-indent:-179px; 
       opacity:1.0;
       filter:alpha(opacity=100);
}

2. Gunakan KODE berikut di bagian body atau saat melakukan posting.

<div id="mouseover" align="center"><a href="http://..../image.jpg"><img  title="mouse rollover" src="http://..../image.jpg"/></a></div>

Keterangan :

  1. KODE untuk transparansi gambar (opacity) disertakan hanyalah supaya hasil akhir yang didapatkan sama persis dengan contoh di atas. Apabila tidak di kehendaki maka KODE opacity bisa di hilangkan.
  2. Apabila menginginkan gambar dengan ukuran berbeda perlu dilakukan penyesuaian pada height:167px; width:179px;dan text-indent:-179px;

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Posting » Rabo    KLIWON, Maret, 07, 2012

» Happy Blogging - gubhugreyot «

1 komentar:

  1. aslamualikumm.....BOS...
    Kalo efek tanpa border pada contoh recent Visitor pake Efeknya yang mana ..BOS..Klo bloeh tau....
    terimaksh sebelumnya...
    salam blogerr....

    BalasHapus

 
GR | Edited by | gubhug reyot