Auto Zoom Image dalam Posting di blogspot

Untuk mempercantik tampilan blog banyak sekali 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)

Contoh Auto Zoom (by lothlorien)


Nah..sekarang ikuti langkah-langkah berikut:

Sig in di blogger dengan id sobat

Klik menu layout

Klik menu Edit HTML

Klik tulisan Download Template lengkap, silahkan save dulu template sobat, ini untuk mencegah resiko apabila terjadi kesalahan dalam melakukan kesalahan dalam proses editing template

Copy kode berikut, lalu paste tepat di atas kode ]]></b:skin>



/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.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 */

}

• Setelah itu simpan tempate (Save Template)

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/AVvXsEgseO4YS_pb3J_NIOASURip3GudFqqsYidCs9wlx5gkn4T1HiHLkQrwwFCxivCrlc47bgJQp3hIrqsBXEqYNf9rb2Cqq7zYilMnpLvyAJvOTnuzXjfSYlsh6SFmXgfFv5Xk1ZMB_ZnLqaA/s1600-h/moon_light2.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 328px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgseO4YS_pb3J_NIOASURip3GudFqqsYidCs9wlx5gkn4T1HiHLkQrwwFCxivCrlc47bgJQp3hIrqsBXEqYNf9rb2Cqq7zYilMnpLvyAJvOTnuzXjfSYlsh6SFmXgfFv5Xk1ZMB_ZnLqaA/s400/moon_light2.jpg" alt="" id="BLOGGER_PHOTO_ID_5358052155725858626" border="0"/></a>

• Kopi Paste kode di atas ke dalam notepad. Perhatikan kode warna MERAH (URL gambar1) dan Warna Hijau (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