Cara menciptakan gambar posting membesar pada ketika disentuh mouse. Sedikit berbeda dengan artikel aku sebelumnya ialah perihal cara menciptakan gambar posting berputar, gambar akan berputar dan juga membesar. Kali ini gambar di posting blog akan kita perbesar saja. Dengan begitu kita sanggup memakai gambar dengan ukuran yang kecil. Ketika disentuh mouse, maka gambar akan membesar.
Kaprikornus sanggup menghemat ruang tulis kita di blog. Loading blog pun akan jauh lebih cepat pada ketika dibuka. Dan juga menciptakan goresan pena 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 isyarat ]]></b:skin>.
- Setelah itu, copy isyarat dibawah ini, dan pastekan diatas ]]></b:skin>
- Terakhir Save Template. Selesai.
.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}
Keterangan isyarat langkah 3:
scale(1.4) untuk mengatur berapa besar gambar pada ketika di sentuh mouse. Jika kurang besar silakan diganti dengan angka yang lebih besar. Contoh:scale(1.9)
5s waktu yang dibutuhkan, ketika memperbesar gambar.
Itulah sedikit tuorial perihal cara menciptakan gambar di posting blog membesar pada ketika disentuh mouse. Silakan dibaca juga artikel aku yang lainnya. Semoga sanggup bermanfaat untuk anda.
0 comments:
Post a Comment