Cara Membuat Gambar Posting Membesar

Cara membuat gambar posting membesar pada saat disentuh mouse. Sedikit berbeda dengan artikel saya sebelumnya yaitu tentang cara membuat gambar posting berputar, gambar akan berputar dan juga membesar. Kali ini gambar di posting blog akan kita perbesar saja. Dengan begitu kita bisa menggunakan gambar dengan ukuran yang kecil. Ketika disentuh mouse, maka gambar akan membesar.

Jadi dapat menghemat ruang tulis kita di blog. Loading blog pun akan jauh lebih cepat pada saat dibuka. Dan juga membuat tulisan terlihat rapi. Untuk lebih jelasnya, ikuti langkah-langkah dibawah ini.

1. Login ke blogger. Dari halaman dasbor, pilih pengaturan template.
2. Selanjutnya, Klik Edit HTML dan cari kode ]]></b:skin>.
3. Setelah itu, copy kode dibawah ini, dan pastekan diatas ]]></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 Save 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.

Itulah sedikit tuorial tentang cara membuat gambar di posting blog membesar pada saat disentuh mouse. Silakan dibaca juga artikel saya yang lainnya. Semoga bisa bermanfaat untuk anda.

Tweet