Memasang Efek jQuery Image Zoom

Text Resizer: Click for Resizer

Huuuuuhhh udah lama aku ingin memasang postingan ini,memang sih aku sekarang disibukkan oleh perkuliahan tapi itu tak membuatku untuk berhenti menulis Blog.Pada kesempatan kali ini aku akan menjelaskan kepada teman-teman tentang bagaimana memasang image zoom pada gambar tutorial ini saya peroleh dari http://modification-blog.blogspot.com/ tutorial kali ini sebenarnya sudah umum kuq tapi tak apalah sebagai refrensi teman-teman aja,bagi yang belum tahu tentang tutorial ini

Ketika pembaca blog melakukan klik (klik kiri atau klik kanan) pada suatu gambar pada blog kita, maka gambar akan ditampilkan tetap pada halaman tersebut dengan efek membesar (zoom-in) yang lembut. Dan jika di klik tombol [X] Close atau menekan tombol Esc pada keyboard maka gambar akan di sembunyikan (zoom-out) dengan efek mengecil yang lembut. Tapi ini berlaku untuk semua gambar yang ada di blog kita tanpa terkecuali.Oh ya langsung aja yach tutorialnya

• Seperti biasa log in dulu ke blogger anda

• Masuk ke Rancangan - Edit HTML

• Cari Kode Beriku Ini : ]]></b:skin>

• Setelah ketemu masukkan kode CSS dibawah ini Sebelum kode ]]></b:skin>

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/d/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;
}

• Masih belum selesai setelah itu cari kode berikut </head>

• Setelah ketemu masukkan kode berikut diatasnya.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>

<script type="text/javascript" src="http://imagezoomnobi.googlecode.com/files/jquery.imageZoom.min.js"/>
<script type="text/javascript">
jQuery(document.body).imageZoom();
</script>

• Klik Simpan Selesai Semoga bermanfaat

NB :  Untuk pemasangan Jquery warna hijau jika anda sudah memasangnya di template anda, maka J-query tersebut tidak usah dipasang.

Artikel Terkait:

Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
Dalam Judul : Memasang Efek jQuery Image Zoom
Dalam Kategori : jQuery
Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.