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'/>7. Simpan Template
<script src='https://susanto-kun.googlecode.com/svn/trunk/SK_imagezoom.js' type='text/javascript'/> <script type='text/javascript'> jQuery(document.body).imageZoom(); </script>
[update title="Informasi buat sobat" icon="info-circle"]Saat ini sobat sedang membaca artikel Cara membuat efek zoom keren dengan Jquery
Sumber:
Jangan lupa untuk memberikan komentar supaya situs ini terus update, terima kasih.[/update]
Posting Komentar