Cara Membuat Gambar Terang Redup di BlogAssalamualaikum Wr Wb, Hallo Kawan - kawan Hobbyku Desain | TrendingKita | Tutorial Desain Dan Blog, Pada Artikel yang kami buat dan juga anda baca kali ini dengan judul Cara Membuat Gambar Terang Redup di Blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan Artikel BelajarBlog #2 - Hiasan, yang kami tulis ini dapat anda pahami dan juga bermanfaat.

Download Kumpulan Wallpaper Mobile Legends di MasMochen

Judul Artikel: Cara Membuat Gambar Terang Redup di Blog
link : Cara Membuat Gambar Terang Redup di Blog

Cara Membuat Gambar Terang Redup di Blog

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.

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/AVvXsEgMnpTbDVcrJU10tasDBK7GAC-ryfFZI_PCTsW3r9iUp3zdQXtlImJTs9gu3vnfpBd3uyfV3gUfFHa4ZyNHT8hzFtzIxCbRvR3ShzHEaXyNvZH7qSzaQ6N0v-g7Z2KssGOBi0Pex940HIQ/
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/AVvXsEgMnpTbDVcrJU10tasDBK7GAC-ryfFZI_PCTsW3r9iUp3zdQXtlImJTs9gu3vnfpBd3uyfV3gUfFHa4ZyNHT8hzFtzIxCbRvR3ShzHEaXyNvZH7qSzaQ6N0v-g7Z2KssGOBi0Pex940HIQ/
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>

Demikianlah Artikel Cara Membuat Gambar Terang Redup di Blog

Demikian artikel Cara Membuat Gambar Terang Redup di Blog yang kami tulis kali ini, Semoga artikel diatas dapat memberi manfaat untuk anda semua yang membaca. Sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Gambar Terang Redup di Blog dengan alamat link https://hobbykudesign.blogspot.com/2018/07/cara-membuat-gambar-terang-redup-di-blog.html

Download Kumpulan Wallpaper Mobile Legends di MasMochen