Cara Menciptakan Gambar Postingan Membesar Ketika Disentuh Kursor Mouse

Selamat malam sahabat pembaca, kali ini aku akan menyebarkan tips & trik. Cara menciptakan gambar postingan membesar dikala disentuh kursor mouse. Banyak sekali cara untuk mempercantik tampilan gambar postingan sebuah blog yang kita miliki, salah satunya dengan cara memperbesar gambar postingan  dikala disentuh oleh kursor mouse. Gambar yang ada disebuah halaman atau isi postingan sebuah blog merupakan gambar untuk pemandu sipembaca semoga gampang 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 pribadi mengezoom/membesar dengan sendirinya.


Untuk menciptakan gambar postingan membesar dikala disentuh kursor mouse dengan sendirinya itu gampang kok sob, kita hanya copy pastekan instruksi 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

Baca Juga

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>, lalu copy dan pastekan  instruksi javascript dibawah ini sempurna diatas instruksi ]]></b:skin>. ( Untuk cara mencari instruksi script di Edit HTML theme/Template blog, sahabat dapat 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 instruksi scriptnya pada Edit HTML, sobat  dapat lihat perubahan yang terjadi pada Template blog dengan cara klik "Prieview theme/Template". Jika sahabat sudah mantap dengan perubahan theme/Template blog tersebut, sahabat dapat pribadi aja klik Save theme untuk menyimpan.

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

Artikel Terkait

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel