Cara Membuat Efek Zoom Gambar Artikel di Blog
September 13, 2019
Efek Zoom Gambar ini dapat sobat lihat di Toko online, mereka menggunkan fitur efek zoom ini dimana untuk mempermudah konsumen untuk melihat lebih detail produk yang ingin dibelinya.
Perlu di ketahui toko online menggunakan platfrom wordpress jadi, bagi sobat yang lagi ingin memasangnya di toko online sobat di wordpress mungkin tutorial ini kurang cocok, karena disini khusus untuk pengguna paltfrom Blogger.
Salah satu keuntungan memasang efek zoom pada gambar postingan adalah sobat tidak perlu lagi untuk memperbesar gambar dengan cara klik kanan pada gambar dan open link new tab.
Itu tidak perlu lagi, dengab memasang beberapa racikan kode sobat nantinya hanya perlu mengarahkan kursor ke gambar tersebut dan secara otomatis gambar terebut akan ter zoom dengan sendirinya.
Untuk membuat efek zoom gambar postingan sangatlah mudah, kita hanya memasang sedikit racikan kode CSS saja dan pastinya responsive, karena tidak menggunakan Javascript yang dapat memeprlampat loading blog.
Baikalh bagi sobat yang tertarik ingin memasang Efek Zoom pada gambar artikel blog, sobat bisa mengikuti langkah-lankah memasangnya dibawah ini.
Cara Membuat Efek Zoom di Artikel Blog
Silahkan ikuti langkah-langkahnya dibawah ini dengan baik, supaya tidak terjadi kesalahan pada pemasangannya dan membuat hasilnya buruk atau tidak bisa di save, baiklah beirkut ini caranya!
1. Pertama, Login ke Blogger.com
2. Pilih Menu "Template/Theme"
3. Pilih Edit HTML
4. Cari Kode ]]></b:skin> (Gunakan CTRL+F Untuk mempermudah pencarian).
5. Setelah ketemu, Copy dan pastekan kode dibawah ini tepat diatas kode ]]></b:skin>
Jika ingin menggunakan style ke-2 sobat dapat menggunakan kode dibawah ini, jadi pilih salah satu satyle diatas ini atau yang dibawah ini.
.post img:hover { -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -moz-transform: scale(1.3); -webkit-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); }
.post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}}
7. Selesai dan lihat hasilnya!
Baca Juga: Aplikasi Mencari Jodoh!
Demikianlah artikel kali ini Cara Membuat Efek Zoom pada gambar artikel blog, semoga artikel kali ini dapat bermanfaat untuk sobat semuanya yang membaca artikel ini.
Happy Blogging!!
0 komentar