Buat (EFEK ZOOM) Cara Membesarkan Gambar Postingan Blog

Membuat (EFEK ZOOM) untuk membesarkan gambar postingan Blog. Hai sobat Ciri seo blog yang lagi mencari artikel ini tentang membesarkan / zoom gambar di blog sepertinya ada di sini, sebelum kita ke tutorialnya, sobat harus tahu kenapa dan untuk apa kita membuat tampilan website blog khususnya gambar/image diperbesar, menurut pendapat dari kami agar tampilan blog khususnya ukuran gambar kadang kecil pada postingan artikel itu, namun dengan menambahkan javacript yang disimpan pada template, setelah diuji ternyata gambar dapat diperbesar dengan cara menyorot atau saat disentuh cussor/mouse akan otomatis membuat tampilan gambar menjadi besar.

Dengan efek zoom maka pengunjung bila ingin melihat jelas gambar tak perlu klik beberapa kali, cukup dengan menyorotkan cursor, otomatis gambar bisa lebih besar dari gambar asalnya, alasannya mengapa harus menggunakan efek zoom ini?........blog yang mengutamakan kecepatan halaman bila dibuka pengunjung tentunya gambarnya memiliki ukuran kecil, jadi memudahkan pengunjung dengan cara ini bisa disiasati gambar kecil akan berubah seketika saat disorot mouse.

Cara Membesarkan Gambar Postingan Blog

Efek zoom ini sering kita lihat pada website yang memiliki gambar lebih dari satu biasanya, ya alasanya seperti pada paragraf kedua untuk mempercepat loading blog dan ruang gambar tidak sesak pada sebuah halaman blog.
Baca juga : Meningkatkan traffic pengunjung blog
Nah untuk lebih jelasnya cara membuat membesarkan gambar postingan dengan efek kaca pembesar sebagai berikut :

Cara Buat Efek Zoom Ada Blog


Untuk membuktikannya dari javascript ini kita lanjut saja ke tahap penempatannya, seperti steps di bawah:

A). Silahkan sobat login dulu di blogger.com
B). Setelah terbuka menu dasbor selanjutnya pilih sub-menu Template
C). Selanjutnya klik ==>  Edit HTML
D). Silahkan cari kode :

]]></b:skin>

E). Setelah itu Copy kode CSS seperti di bawah kemudian sobat paste di atas kode ]]></b:skin>

.post img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 2px 2px 0;
}
.post img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

F). Kemudian klik simpan, silahkan cek pada salah satu halaman target, apabila gambar menjadi besar otomatis dengan menempelkan tanda panah sursor itu tandanya Anda berhasil dan kode diats berfungsi dengan baik.


Itulah tips tentang (EFEK ZOOM) cara memperbesar images gambar dalam blog untuk blog semoga bisa bermanfaat.
Nb: Bila sobat suka atau baru mengenal, berbagi dengan teman lebih asik dengan cara share

Subscribe to receive free email updates: