Autozoom Gambar di Postingan

Cara Menampilkan Autozoom Gambar di postingan, ini untuk menambah tips dan tutorial blogger bagi pemula kita, dimana auto zoom, atau zoom otomatis untuk image atau gambar yang ada dipostingan kita ini sangat menarik sekali, karena apa ? karena kita bisa upload gambar kecil di postingan kita, akan tetapi setelah mouse kita mendekat pada gambar tesebut, gambar otomatis akan membesar, dan ada banyak sekali cara untuk melakukanya, bermacam script dan CSS tambahan lainnya, dan salah satunya adalah dengan menambahkan fasilitas "Auto Zoom Image". Berbeda dengan image zoom lainnya seperti fancy zoom, Auto Zoom hanya perlu menambahkan kode CSS dan menambah atau merubah kode HTML-nya gambar atau image.

Sebelum kita membahas lebih lanjut, arahkan kursor ke photo di atas, >>>arahkan kursor di atas photo<<<<

Untuk membuatnya ikuti langkah-langkah berikut ini, kita masuk ke akun blogger kita kemudian seperti biasa masuk ke layout dan edit html, dan untuk berjaga-jaga download terlebih dahulu template kita untuk menghindari kesalahan dalam melakukan proses pengeditan.

Cari code berikut ini ]]></b:skin> kemudian paste kode dibawah ini tepat diatasnya.


# /*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
/*URL: http://www.cara-ngeblog.blogspot.com/ */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color:#8cc545;
padding: 5px;
left: -1000px;
border: 2px solid #ffffff;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: -50px; /*position where enlarged image should offset horizontally */

}

Kemudian di save,

Langkah selanjutnya, Langkah selanjutnya adalah cara posting gambar dalam postingan. Kita tetap upload gambar seperti biasa kita upload gambar waktu posting. Dan kode HTML standard blogspot adalah seperti di bawah ini :

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3JaAaqbBuYxXjsgl7Os4zVfCVUNIMq9nzN36pmDdYjQNstSgr5gKZvt1cxoZvjdbuDfIPIm8zGYXfnJ-zFJzhs9KZEHEJKKHyRbs9MHtS-R_gNtk5fnYwdmsFbsok1wK6mSuFdOf0j9QL/s1600-h/1.JPG"><img style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 81px; height: 106px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3JaAaqbBuYxXjsgl7Os4zVfCVUNIMq9nzN36pmDdYjQNstSgr5gKZvt1cxoZvjdbuDfIPIm8zGYXfnJ-zFJzhs9KZEHEJKKHyRbs9MHtS-R_gNtk5fnYwdmsFbsok1wK6mSuFdOf0j9QL/s320/1.JPG" alt="" id="BLOGGER_PHOTO_ID_5390769133731139010" border="0" /></a>


�Copy Paste kode di atas ke dalam notepad. Perhatikan kode warna MERAH (URL gambar1) dan Warna Biru (Url Gambar2) karena kode tesebut yang nantinya akan kota Copy paste ke dalam kode di bawah ini.

�Selanjutnya ganti kode diatas dengan kode di bawah ini :

<a class="thumbnail" href="url gambar1"><img src="url gambar2"
border="0" height="70" width="100" /><span><img src="url gambar2" />keterangan gambar</span></a>

�Selanjutnya Copy dan Paste kode Url gambar anda pada "url gambar1" dan "url gambar2"

�Keterangan Gambar adalah keterangan gambar anda.

�Pada kode height="70" width="100" adalah untuk mengatur ukuran thumbnail.

Selamat mencoba semoga bermanfaat.