Membuat efek zooming pada gambar saat disentuh kursor (blogger.com)

Membuat efek zooming pada gambar saat disentuh kursor (blogger.com)

Assalamualaikum.
Konten gambar pada sebuah posting artikel di blog merupakan salah satu hal yang jika kita perhatikan mempunyai fungsi yang penting.Dengan gambar yang menarik dan rapi,tentunya menjadi nilai tersendiri bagi kita
Banyak para penulis blog yang memasang efek-efek gambar tertentu di blog yang mereka miliki,diantaranya adalah efek zoom pada gambar yang jika di disentuh kursor akan membesar sesuai dengan yang diinginkan.Bagi anda yang ingin membuat konten gambar di blog menjadi besar saat disentuh kursor,maka di artikel kali ini saya akan share caranya yang semoga dapat membantu anda.

Berikut cara membuat efek zooming pada gambar saat disentuh kursor
1.Pertama-tama yang anda harus lakukan adalah masuk ke halaman dashboard blog anda di www.blogger.com dengan menggunakan akun blogger yang anda miliki.
2.Setelah masuk ke halaman dashboard,silahkan anda klik nama blog yang akan anda pasangi auto readmore pada area posting (apabila anda memiliki blog lebih dari 1).Contoh seperti gambar dibawah ini.
Membuat efek zooming pada gambar saat disentuh kursor (blogger.com)

3.Di halaman berikutnya silahkan anda klik template,seperti contoh gambar dibawah ini.
Membuat efek zooming pada gambar saat disentuh kursor (blogger.com)

4.Selanjutnya anda klik edit HTML,seperti contoh gambar dibawah ini.
Membuat efek zooming pada gambar saat disentuh kursor (blogger.com)

5.Nanti anda akan bertemu dengan struktur kode-kode yang membentuk template blog anda.Silahkan anda cari kode
]]></b:skin>
Agar lebih mudah dalam pencarian kode anda bisa menggunakan CTRL+F (jika anda menggunakan komputer).
6.Selanjutnya silahkan anda masukkan kode berikut ini tepat diatasnya.
.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); }
7.Pada kode yang saya berikan diatas ada teks berwarna merah yang merupakan ukuran gambar pada posisi zoom saat disentuh kursor.Anda dapat mengganti nilai teks yang berwarna merah sesuai keinginan anda.
8.Jika sudah,berikutnya silahkan anda klik save atau simpan.

Terakhir,silahkan anda kunjungi blog anda,dan sentuhlah gambar yang ada di postingan artikel blog anda.Apabila gambar membesar atau zoom saat disentuh kursor maka anda berhasil melakukannya.
Bagaimana? cukup menarik bukan?
Terimakasih telah berkunjung dan semoga bermanfaat.
Assalamualaikum.

Berkomentarlah dengan kata-kata yang baik dan dilarang mencantumkan link berbau pornografi,iklan