Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang Cara Membuat Efek Hover/Transparansi Pada Gambar dalam Postingan Blogspot.
Fungsi dari Tutorial ini adalah jika cursor mouse menyorot / atau berada pada salah Satu gambar pada blog, maka gambar tersebut akan menyala / buram pada tampilan blog pada postingan.
Coba arahkan kursor / mouse pada gambar maka akan terlihat buram.
Diatas adalah contohnya.
Baca Juga
- Cara Mengembalikan Navbar Blog yang Hilang pada Blog
- Cara Menampilkan Ip Adress Untuk Pengunjung Blog
- Cara Membuat Kotak Tukeran Link pada Blog / Menggunakan Scroll
- Cara Menampilkan Widget Hanya di Halaman Depan Saja
- Cara Menampilkan Foto di Komentar Blog
- Cara Menampilkan Seluruh Postingan Blog pada Label Jika di Klik
- Cara Menampilkan Widget di Halaman Tertentu
- Cara Membuat Tepi Gambar Bershadow Dengan CSS 3
Cara Membuat Efek Hover/Transparansi Pada Gambar dalam Postingan Blogspot :
- Pilih gambar yang akan digunakan
- Setelah itu upload ke internet
- Setelah di-upload, Anda akan mendapatkan URL gambar tersebut
- URL gambar tersebut harus Anda sisipi dengan kode berikut ini :
onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" style="opacity:1;filter:alpha(opacity=100)"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" style="opacity:1;filter:alpha(opacity=100)"
- Berikut adalah contoh code untuk dipasang pada postingan, warna merah adalah URL gambar.
<img onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" style="opacity:1;filter:alpha(opacity=100)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3STb6-TyyOkiZSglcaX_HUHQlkYB-3bGJ-jST0dL8FpwgCBt3oHby5qerhaRYU43997LBx4jAH8szi8j-0t0LF5ngBez4HES63VAbjrKukG62Vxx2ql8SkKoGfkwNXiGQ4UzjMxo6BNBg/s400/home.png"/></a>
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" style="opacity:1;filter:alpha(opacity=100)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3STb6-TyyOkiZSglcaX_HUHQlkYB-3bGJ-jST0dL8FpwgCBt3oHby5qerhaRYU43997LBx4jAH8szi8j-0t0LF5ngBez4HES63VAbjrKukG62Vxx2ql8SkKoGfkwNXiGQ4UzjMxo6BNBg/s400/home.png"/></a>
Demikian blogger tutorial mengenai Cara Membuat Efek Hover/Transparansi Pada Gambar dalam Postingan Blog.
Semoga bermanfaat dan semoga berhasil.
Terima Kasih ^_^
