Cara Membuat Mouseover Pada Gambar Posting (Mode Transparant)

Viyan Pradita Jumat, September 03, 2010

Met pagi semua, mungkin trick ini sudah banyak yang tahu, yaitu cara membuat gambar pada postingan berefek transparant/mouseover. kiranya seperti itu, kebetulan saya lagi nyari-nyari ini trik, ehh akhirnya dapet juga. sekalian deh saya share disni juga.
Kembali ke topik.. Apa itu mouseover?
Mouseover adalah sebuah keadaan dimana mouse berada tepat di wilayah objeck. Nah biar lebih jelas mari langsung saja lihat gambarnya dan praktekin.

A. Cara yang pertama
Untuk contoh yang pertama kita akan membuat keadaan, dalam keadaan normal, maka gambarnya biasa, dan jika mouse tepat berada di wilayah gambar, maka gambar itu akan transparan. perhatikan gambar dibawah ini :



Kode
yang saya gunakan :
<img onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40" src="Lokasi Gambar" style="opacity: 1;" />

B. Cara yang Kedua
Cara kedua, kita akan membalikan keadaan, yaitu : dalam keadaan normal, gambar akan transparan, sedangkan jika disorot mouse, gambar akan biasa. lihat gambar di bawah ini :




Kode yang saya gunakan :
<img onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="Lokasi Gambar" style="opacity: 0.4;" />


Keterangan :
Untuk kode yang bercetak warna biru, gantilah dengan alamat url gambar sobat.


Nahh.. ini ada trick lagi, seandainya kita tiap posting harus nempelin kode tersebut satu persatu pastilah menyita waktu kan ?? sekarang Bagimana kalo kita ingin semua gambar di posting anda ingin seperti keadaan diatas?

Ikuti langkah-langkah berikut :

1. Login ke blogger sobat
2. Pilih Rancangan (tata letak)
3. Klik Edit HTML
4. Cari kode : ]]></b:skin>
5. Lalu Simpan kode dibawah, tepat diatas kode : ]]></b:skin>
.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}
6. Kalau sudah Simpan Template, dan lihat hasilnya.


Wuookee.. selamat mencoba semoga sukses.

Ditulis Oleh :

Artikel Cara Membuat Mouseover Pada Gambar Posting (Mode Transparant) ini dipublish pada hari: Jumat, September 03, 2010. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

4 komentar
Terjun Ke Kolom Komentar

  1. keren blogny terutama Tab lamannya,beranda, arsip, alat kontak, gimana tu buatnya, mohon diposting dong cara buatnya. kalaw udah posting, mohon kirimkan ke emailku ya imamfh08@yahoo.com. ditunggu tutorialnya.. thankyou

    BalasHapus
  2. jadi kalau sobat udah kirim emailkan saya tinggal lihat tutorialnya disini, oya.. kunjungi juga www.tempat-bersinggah.blogspot.com ditunggu tutorialny

    BalasHapus
  3. gan, ane mau buat kayak yang di popular post agan, caranya gmana??

    BalasHapus
    Balasan
    1. Disini gan :
      http://kode-blogger.blogspot.com/2012/04/modifikasi-widget-popular-post-with.html

      Hapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers