Menapilkan Autozoom Gambar di postingan

Cara Menapilkan 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 membersar,
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 yang atutorialnya da pada blognya kang rohman) yang menggunakan code java script, karena "Auto ZOom hanya perlu meambahkan kode CSS dan menambahatau merubah kode HTML-nya gambar atau image.

Sebelum kita membahas lebih lanjut, lihat demo di bawah ini >>>arahkan kursor di atas image<<<<
Anak ku
untuk membuatnya ikuti langkah-langkah berikut ini, kita masuk ke akun blogger kita kemudaian seperti biasa masuk ke layout dan edit html, dan untuk berjaga-jaga download terlebihdahulu templates kita untuk menghindarai kesalahan dalam melakukan proses pengeditan

cari code berikut ini ]]></b:skin> kemudian paste Kode dibawah ini tepat diatasnya ]]></b:skin>


# /*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/AVvXsEhL19oREwAVdG8Q0CgRks9wK6PsN9aaaEdNdoiYYDdEbm_y41MocZfyvBH06lsC0U9Nrz_1hVPUtRv5XgYwcf7n7oRyk8igrhnrZSY1UDSq67NGlhGOh6LfNjXvuigY-sUUwjZGGKx3bKJc/s1600-h/DSC00676.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 240px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL19oREwAVdG8Q0CgRks9wK6PsN9aaaEdNdoiYYDdEbm_y41MocZfyvBH06lsC0U9Nrz_1hVPUtRv5XgYwcf7n7oRyk8igrhnrZSY1UDSq67NGlhGOh6LfNjXvuigY-sUUwjZGGKx3bKJc/s320/DSC00676.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5363320321110466786" /></a>

• Kopi 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 kopi 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 Kopi 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 ntuk mengatur ukuran thumbnail.

selamat mencoba semoga berhasil ya