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

Informasi buat sobat
Saat ini sobat sedang membaca artikel Cara membuat efek zoom keren dengan Jquery
Sumber:https://anthzoblog.blogspot.com/2014/05/cara-membuat-efek-zoom-keren-dengan_6.html
Jangan lupa untuk memberikan komentar supaya situs ini terus update, terima kasih.

Posting Komentar

Posting Komentar

Emoticon
:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Click to see the code!
To insert emoticon you must added at least one space before the code.

Image 1 Title

Image 1 Title
Sesuatu yang sangat berharga

Formulir Kontak

Nama

Email *

Pesan *

Diberdayakan oleh Blogger.