Cara membuat gambar posting membesar pada saat disentuh mouse. 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.
- Login ke blogger. Dari halaman dasbor, pilih pengaturan template.
- Selanjutnya, Klik Edit HTML dan cari kode ]]></b:skin>.
- 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}
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}
- 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.
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.
