-->
Selamat datang di website www.imamkunblog.com - Tempat Sharing Tips Trik Android, Komputer, Internet dll

Cara Membuat Efek Zoom Gambar Artikel di Blog

Cara Membuat Efek Zoom Gambar Artikel di Blog
Cara Membuat Efek Zoom Gambar Artikel di Blog
Cara Membuat Efek Zoom Gambar Artikel di Blog - Efek zoom adalah sebuah effect yang menampilkan gambar secara detail dengan dilakukan zoom dan dapat bermanfaat bagi orang yang kurang jelas atau sulit untuk melihat gambar di suatu blog.

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>


.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); }

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{-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}}
6. Jika sudah memilih antara satu kode diatas ini maka Save Template/Save Theme. 
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!!
Show comments
Hide comments

0 Response to "Cara Membuat Efek Zoom Gambar Artikel di Blog"

Post a Comment

Berkomentar dengan Baik dan Jangan Buat Spam
1. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×