Cara Membuat Gambar Posting Membesar Ketika di Sentuh Oleh Mouse

Dalam memposting artikel, berita atau tutorial di blog, mungkin kebanyakan para blogger akan menggunakan gambar, baik itu sebagai variasi atau juga sebagai bagian yang penting dalam tulisan di blog tersebut. Tekadang gambar yang di upload ke postingan blog, memiliki ukurang yang relatif kecil, baik itu merupakan ukuran aslinya atau juga karena memang gambar tersebut dikecilkan ukurannya ketika di posting, karena untuk menyesuaikan dengan tulisan di blog tersebut.

Nah terkadang para pembaca yang ingin melihat gambar tersebut harus membukanya di tab baru atau mengklik gambar tersebut, terkadang hal ini juga membutuhkan waktu, terlebih jika gambar tersebut memiliki ukuran yang cukup besar. Untuk mempermudah melihat gambar, maka dalam tutorial kali ini akan diterangkan mengenai bagaimana membuat gambar di postingan blog menjadi membesar ketika di sentuh oleh mouse, berikut ini langkah-langkahnya :

1. Login ke blogger. Dari halaman dasbor, pilih Template.

2. Selanjutnya, Klik/pilih Edit HTML, dan cari kode ]]></b:skin> (Guakan Ctrl+F untuk mempermudah pencarian).

3. Setelah itu, copy kode dibawah ini, dan pastekan tepat diatas kode ]]></b:skin>

.post img{
vertical-align:bottom;max-width:90%;max-height:90%;
-o-transition:all .5s ease;
-moz-transition:all .5s ease;
-webkit-transition:all .5s ease}
.post img:hover{
-o-transform:scale(1.4) translate(0px);
-moz-transform:scale(1.4) translate(0px);
-webkit-transform:scale(1.4) translate(0px);
-o-transition:all .5s ease;-moz-transition:all .5s ease;-webkit-transition:all .5s ease}

4. Terakhir Simpan Template. Selesai.

Keterangan kode langkah 3:
scale(1.4) untuk mengatur berapa besar gambar pada saat di sentuh mouse. Jika kurang besar silakan diganti dengan angka yang lebih besar. Contoh:scale(1.9)
5s waktu yang dibutuhkan, saat memperbesar gambar.