Cara membuat efek zoom keren dengan Jquery

Cara membuat efek zoom keren dengan Jquery, dari namanya saja sudah jelas kalau tutorial kali ini mengenai efek zoom ketika kita mengklik gambar pada salah satu postingan blog dan tentunya dengan efek yang keren, sebagai contoh teman2 bisa klik gambar di atas untuk mengetahui penampaka (bukan kunti) nya.

Langkah-langkah :
1. Loggin ke blogger
2. Pergi ke Template bawahnya Tata Letak
3. Cari kode (Ctrl+F) ]]></b:skin> 
4. Masukan kode di bawah ini diatas kode tsb :
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(https://lh4.googleusercontent.com/-J7LgRRCCYPQ/U3Fx004_tHI/AAAAAAAAAKg/2AJo-yFVMCw/h120/SK_imagezoom.png) no-repeat; display: block; width: 25px; height: 25px; position: absolute; right: -17px; top: -17px; /* IE-users are prolly used to close-link in right-hand corner */ *right: auto; *left: -17px; text-decoration: none; text-indent: -100000px; outline: 0; z-index: 11; } div.jquery-image-zoom a:hover { background-position: right -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; }
5. Cari kode (Ctrl+F) </head>
6. Masukan kode di bawah ini di atas kode tsb :
<script src='https://susanto-kun.googlecode.com/svn/trunk/SK_jquery132.js' type='text/javascript'/>
<script src='https://susanto-kun.googlecode.com/svn/trunk/SK_imagezoom.js' type='text/javascript'/> <script type='text/javascript'> jQuery(document.body).imageZoom(); </script> 
7. Simpan Template

[update title="Informasi buat sobat" icon="info-circle"]Saat ini sobat sedang membaca artikel Cara membuat efek zoom keren dengan Jquery
Sumber:http://www.anthzo.com/2014/05/cara-membuat-efek-zoom-keren-dengan.html
Jangan lupa untuk memberikan komentar supaya situs ini terus update, terima kasih.[/update]

Posting Komentar

[blogger][facebook][disqus]

Image 1 Title

Image 1 Title
Sesuatu yang sangat berharga

Formulir Kontak

Nama

Email *

Pesan *

Diberdayakan oleh Blogger.