Cara Membuat Gambar Postingan Membesar Saat Disentuh Kursor Mouse

Selamat malam sobat pembaca, kali ini saya akan berbagi tips & trik. Cara membuat gambar postingan membesar saat disentuh kursor mouse. Banyak sekali cara untuk mempercantik tampilan gambar postingan sebuah blog yang kita miliki, salah satunya dengan cara memperbesar gambar postingan  saat disentuh oleh kursor mouse. Gambar yang ada disebuah halaman atau isi postingan sebuah blog merupakan gambar untuk pemandu sipembaca agar mudah mengikuti langkah-langkah sebuah tutorial pada postingan sebuah blog. Maka dari itu si pembaca tanpa susah-susah untuk menge-klik gambar pada postingan cuman untuk mezoom/memperbesar gambar tersebut. Disini sipembaca hanya mengarahkan kursor mouse ke gambar, secara otomatis gambar tersebut akan langsung mengezoom/membesar dengan sendirinya.

Untuk membuat gambar postingan membesar saat disentuh kursor mouse dengan sendirinya itu mudah kok sob, kita hanya copy pastekan kode script ke Edit HTML pada Theme/Template blog. Untuk lebih jelasnya, ikuti langkah-langkah sebagai berikut.

Baca juga :

1. Cara Mencari Kode Script di Edit HTML Template BLOG
2. Cara Merubah Ukuran Foto/Gambar di Paint untuk Favicon di Blog
3. Cara Share Atau Membagikan Tautan Blog ke Media Sosial (Facebook)

    CARA MEMBUAT GAMBAR POSTINGAN MEMBESAR SAAT DISENTUH KURSOR

1. Login ke Blogger sobat.

2. Masuk ke Dashboard Blog, selanjutnya klik Theme/Template. Kemudian klik Edit HTML.

3. Kemudian cari kode ]]></b:skin>, kemudian copy dan pastekan  kode javascript dibawah ini tepat diatas kode ]]></b:skin>. ( Untuk cara mencari kode script di Edit HTML theme/Template blog, sobat bisa baca juga pada link judul artikel diatas ).

.post img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 2px 2px 0;
}
.post img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

4. Jika sudah dipastekan kode scriptnya pada Edit HTML, sobat  bisa lihat perubahan yang terjadi pada Template blog dengan cara klik "Prieview theme/Template". Jika sobat sudah mantap dengan perubahan theme/Template blog tersebut, sobat bisa langsung aja klik Save theme untuk menyimpan.

Selesai, itulah tadi cara membuat gambar postingan membesar saat disentuh kursor mouse. Semoga bermanfaat, Selamat mencoba semoga berhasil.
Salam Blogger.