4/19/2017

Membuat gambar zoom saat disentuh oleh mouse

Mungkin anda pernah berkunjung ke blog orang lain dan sering melihat gambar yang menjadi besar atau zoom apabila tersentuh mouse seperti yang ada di blog Saya ini. Sebenarnya itu hanya suatu tambahan saja untuk mempercantik tampilan pada blog, namun jika Anda tertarik ingin membuatnya caranya sangat mudah. Dibawah ini Saya akan memberikan kode yang dapat di copy paste dengan mudah kedalam HTML blog kalian. 


Pertama untuk membuat agar tampilan gambar post menjadi besar atau zoom saat disentuh mouse yaitu:
  • Masuk ke akun blogger kalian.
  • Pilih Template > Edit HTML.
  • Cari kode ]]></b:skin> , agar mudah mencarinya gunakan fungsi Find dengan menekan tombol CTRL+F pada keyboard.
  • Kalau sudah ketemu, letakkan kode berikut tepat di atas kode ]]></b:skin>
    .post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
    .post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
  • Terakhir klik Simpan Template. Kemudian lihat hasilnya .

Lorem ipsum is simply dummy text of the printing and typesetting industry.


EmoticonEmoticon