Search

Saturday, July 30, 2011

Membuat Effect Zoom Gambar J-Query Di Blogger

Para blogger sejati,saya akan menjelaskan cara memasang efek zoom jQuery di blogger,Contohnya klik aja gambar di postingan ini.
langsung aja ke tutornya:

Step 1.
Login ke blogger

Step 2.
Klik rancangan lalu klik Edit HTML



Step 3.
Centang Expand Widget Template.

Step 4.
Carilah kode ]]></b:skin>

Step 5
Sisipkan script berikut tepat di atas ]]></b:skin>

/* Zoom Image www.ilmuonline.web.id
------------------------------- */
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;
}
Step 6.
Selanjutnya carilah kode </head>

Step 7.
Sisipkan kode berikut di atas kode </head>

<!-- Zoom Image code script www.ilmuonline.web.id -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://rizki-khaizir.googlecode.com/files/jquery.imageZoom.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document.body).imageZoom();
</script>

Step 8.
Simpan templatenya.

7 comments:

  1. mantap gan, ijin sedot buat di blog saya ya :) Mampir balik :)

    ReplyDelete
  2. gak berat kok,liat aja blog gue..gak kan

    ReplyDelete
  3. Thank infonya smg bermanfaat follow me back

    ----http://onlinegames-game-online.blogspot.com---

    ReplyDelete
  4. kalau video gmn caranya gan??

    mohon pencerahannya....

    ReplyDelete
  5. gan itu effect otomatis untuk semua gambar ya?

    ReplyDelete
  6. thanks bang.... mantap ni... blogku gambarnya jadi bisa di zoom... tapi ada ga script yang buat foto di blog jadi tambah ganteng? hehehehe...

    ReplyDelete

Google +