Membuat Efek zoom pada Gambar

Assalamualaikum Wr. Wb.

Hai Sobat Blogger, Hari ini saya akan share tentang Membuat Efek zoom pada Gambar ini saya dapatkan dari DeeJayHan

Langsung aja, Cekidot :


Langkah Tambahkan ke Blogger:

1.Login ke akun Blogger.
2. Sekarang Pergi ke Desain> Edit HTML.

Sekarang mencari tag dan paste kode di bawah ini letakkan di atas

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/Easy%20Image%20Zoom/easyzoom.js"></script>
<link href="http://dl.dropbox.com/u/27675057/Easy%20Image%20Zoom/default.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript">
jQuery(function($){
$('a.zoom').easyZoom();
});
</script>

Sekarang mencari ]]> </ b: skin>
tag dan paste kode berikut hanya atas / Sebelum itu.

/* Edit width, height and placement of the dynamically created image zoom box. */
#easy_zoom{
width:600px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:absolute;
top:50px;
left:700px;
overflow:hidden;
-moz-box-shadow:0 0 10px #777;
-webkit-box-shadow:0 0 10px #777;
box-shadow:0 0 10px #777;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}

Sekarang untuk menambahkan gambar ke dalam Easy Zoom Pertama anda harus menggunakan kode

<a href="Image.Jpg" class="zoom"><img src="Image.Jpg" alt="Teks Anda"></a>

Lalu Save / Terbitkan dan lihat efek zoom nya :D

Related Post