Membuat Gambar di Blog Terang Redup Di bawah Mouse

Ketika kita berkunjung ke blog-blog sahabat, mungkin kita menjumpai beberapa efek yang cukup membuat kita teratarik. Efek-efek tersebut sangat beragam, misalnya gambar di blog menjadi berputar, membesar, bergerak ke kiri atau kanan (atau arah lainnya), redup menjadi terang, terang menjadi redup, maupun gabungan dari beberapa efek (misalnya berputar sekaligus membesar).

Nah, Hal yang ingin saya sampaikan hari ini terkait dari salah satu efek tersebut yaitu cara membuat gambar redup menjadi terang serta terang menjadi redup di blog ketika mouse komputer yang kita miliki berada di atas gambar tersebut.

Berikut adalah sebuah gambar yang saya sediakan dengan efek gambar terang menjadi redup saat mouse yang anda miliki diarahkan di atasnya :

Kumpulan DP BBM Bergerak

Untuk Membuat gambar di Blog memiliki efek seperti gambar di atas, sebenarnya sangatlah mudah. Kita bisa menggunakannya efek nya untuk satu gambar saja, maupun kepada seluruh gambar yang ada di seluruh blog.

Gambar Terang-Redup Seluruh Gambar di Blog
Jika kita ingin membuat seluruh gambar di blog mempunyai efek terang redup maupun redup terang. Sebenarnya mudah saja,  kita cukup menambahkan Script di kode HTML template, maupun bisa menambahkannya pada Widget, melalui tata letak (lay Out). Berikut adalah Script yang bisa anda tambahkan :

Membuat Gambar Terang menjadi Redup

<style>
.post a img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
 .post a:hover img {
 filter:alpha(opacity=70);
-moz-opacity: 0.7;
 opacity: 0.7;
}
</style>

Membuat Gambar Redup menjadi Terang

<style>
 img {
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
 }
 img:hover {
 filter:alpha(opacity=100);
 -moz-opacity:.0;
opacity:1.0;
}
 </style>

Cara Memasang di Blog Melalui Tata Letak
Saya sendiri lebih suka menambahkan Script-Script melalui Widget di Tata letak. Jika anda mau meletakannya di tata letak Juga, maka anda Bisa mengikuti Langkah berikut ini :

1. Log in di Blogspot anda
2. Klik Menu Tata Letak
3. Tambah Widget
4. Tambah HTML
5. Copi Paste Script di atas (Pilih salah satu)
6. Save

Coba Periksa gambar-gambar yang ada di Blog anda sekarang, apakah Script tersebut telah bekerja cukup Baik.

Gambar Terang-Redup Salah satu gambar
Jika hanya salah satu gambar saja yang ingin kita berikan efek, maka langkah paling mudah yang saya sarankan adalah, upload saja gambar seperti biasa, kemudian masuk ke Mode penulisan HTML (Bukan Compose) lalu tambahkan beberapa kode HTML setelah URL Gambar. Misal  Gambar berikut :

Normal
<a title="Komunitas IDA DARMA AYU" href="" rel="nofollow" target="_blank"><img alt="Komunitas IDA DARMA AYU" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhiis0xSMSQRm4hecOATGXpHys7uNXoKJH9TS335uc-LfYukt-o3jUcqGMNS3EjsqRHTQpgLnNH34Fhhcxrok_H4xRqgohmbGVDgmwstXU-F5JhhxJXjQLzWLxgXHuVi0Rgb6695XHdDg/
s1600/KOMUNITAS.png" width="145px" height="145px"/></a>


Di Tambahkan Script Terang-Redup
<a title="Komunitas IDA DARMA AYU" href="" rel="nofollow" target="_blank"><img alt="Komunitas IDA DARMA AYU" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhiis0xSMSQRm4hecOATGXpHys7uNXoKJH9TS335uc-LfYukt-o3jUcqGMNS3EjsqRHTQpgLnNH34Fhhcxrok_H4xRqgohmbGVDgmwstXU-F5JhhxJXjQLzWLxgXHuVi0Rgb6695XHdDg/
s1600/KOMUNITAS.png" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.2;this.filters.alpha.opacity=40" style="opacity: 1;" width="145px" height="145px"/></a>

Baca Juga :
Membuat Galeri Blog Slide Show bertombol di Blog
Mengubah Gambar menjadi PDF dengan NitroPDF
Memperkecil Foto tanpa mengurangi kualitas
Cara membuat gambar Zoom di Blog
Daftar Artikel Blog