Image efek Popup Zoom in

Pada pertemuan kali ini saya akan memberikan tips mengenai efek popup zoom in pada sebuah gambar/foto. Kenapa saya sebut popup zoom in, yahhh karena ketika gambar kita klik maka gambar tersebut akan tampil zoom in alias membesar sebagai popup dengan menutupi seluruh bagian homepage kita, dan ada tombol close (X) pada pojok kanan atas.

Pada bagian bawah terdapat image kecil sebagai navigasi yang akan berganti gambar jika kita klik salah satunya. Gimana???

Jika anda tertark untuk membuatnya pada blog anda, silahkan ikuti langkah2 berikut :

Pilih Template > Edit HTML > Proceed.

Cari kode <head>

Untuk mempermudah pencarian, blok kode <head> kemudian pencet Ctrl + F dan paste kode <head>

Letakkan kode dibawah ini persis dibawah kode <head>
Simpan template

<style type='text/css'>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
ul{list-style-type:none;}
li{display:inline;padding-right:5px;}
a {text-decoration:none;}
img {border:none;}

div.jquery-image-zoom {
line-height: 0;
font-size: 0;
z-index: 10;
border: 5px solid #fff;
margin: -5px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
div.jquery-image-zoom a {
background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/s800/jquery.imageZoom.png) no-repeat;
display: block;
width: 25px;
height: 25px;
position: absolute;
left: -17px;
top: -17px;
/* IE-users are prolly used to close-link in right-hand corner */
*left: auto;
*right: -17px;
text-decoration: none;
text-indent: -100000px;
outline: 0;
z-index: 11;
}
div.jquery-image-zoom a:hover {
background-position: left -25px;
}
div.jquery-image-zoom img,
div.jquery-image-zoom embed,
div.jquery-image-zoom object,
div.jquery-image-zoom div {
width: 100%;
height: 100%;
margin: 0;
}
</style>

Gimana??? Gampang kann. Cuma butuh copy paste aja koq. Trus anda buat postingan, nah..... pas anda ingin membuat gambar dengan efek itu, maka anda harus mengetikkan kodenya seperti ini :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgGJaH-QRl-CDS1eEQbJslJUZK7OHIloqFSACq7XjoufOufsY0CMnHCtVq434IvHEQKouhKwe6oACBYewCeTaoV00-ULDRAzDhxTSdaUf39qdTywJTA7KkH5PyHrvoRGJ22T2ZA1OW2F4U/s1600/kota.jpg" width="150px"><img alt="tutorial" hight="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgGJaH-QRl-CDS1eEQbJslJUZK7OHIloqFSACq7XjoufOufsY0CMnHCtVq434IvHEQKouhKwe6oACBYewCeTaoV00-ULDRAzDhxTSdaUf39qdTywJTA7KkH5PyHrvoRGJ22T2ZA1OW2F4U/s1600/kota.jpg" width="150px" /></a>

Hasilnya akan seperti ini (di klik yach) :

Ok..... sy rasa cukup tuk trik zoom kali ini. Semoga bermanfaat,

HTML

Javascript

CSS

JQuery

Tips Blog

Image efek Popup Zoom in

{ 0 comments... read them below or add one }

Post a Comment