Effect Gambar di Postingan (Part 2)

Sudahkah anda membaca postingan ini .
Jika sudah, maka untuk menepati janji saya, hari ini kita akan berbagi inspirasi kembali tentang pembuatan effect gambar di blog (part 2).

Effect kali ini adalah mengenai zoom gambar seperti pada contoh demo berikut ini

Bagaimana caranya ? lets follow my instruction now

langkah awal, silahkan sobat masuk ke editor HTML template sobat!. selanjutnya cari kode berikut ]]></b:skin>
kemudian letakkan script code dibawah ini diatas kode ]]></b:skin>

#easy_zoom{
width:600px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:fixed;
top:35px;
left:50%;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}

kemudian cari kode </head>, lalu letakan kode dibawah ini tepat dibawah kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://watonoe.googlecode.com/files/onho%20javascript.txt'/>
<script type='text/javascript'>

jQuery(function($){

$(&#39;a.zoom&#39;).easyZoom();

});

</script>

edit HTML Template sudah selesai, klik simpan template sobat!

Sekarang, tinggal kita pasang fungsi class dari script yang telah kita pasang pada template tadi pada gambar postingan di blog kita.

ini code yang dipasang

class="zoom"

ini contoh kode gambarnya

<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-VtfZGC4_WE4/TcnuhJ-dgzI/AAAAAAAAAIU/-KpUs03tucg/s1600/100_0859.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="http://4.bp.blogspot.com/-VtfZGC4_WE4/TcnuhJ-dgzI/AAAAAAAAAIU/-KpUs03tucg/s320/100_0859.JPG" width="320" /></a></div>

ini hasil setelah class di pasang

<div class="separator" style="clear: both; text-align: center;">
<a class="zoom" href="http://4.bp.blogspot.com/-VtfZGC4_WE4/TcnuhJ-dgzI/AAAAAAAAAIU/-KpUs03tucg/s1600/100_0859.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="http://4.bp.blogspot.com/-VtfZGC4_WE4/TcnuhJ-dgzI/AAAAAAAAAIU/-KpUs03tucg/s320/100_0859.JPG" width="320" /></a></div>

simpan dan tayangkan hasil kerjanya!.