Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini
]]></b:skin>
Masukan kode dibawah ini, diatas kode langkah 3 :
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; }Langkah 5
Cari kode dibawah ini:
</head>
Langkah 6Masukan kode dibawah ini diatas kode langkah no. 5
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/> <script type="text/javascript" src="http://hensblog.googlecode.com/files/jquery.imageZoom.min.js"/> <script type="text/javascript"> jQuery(document.body).imageZoom(); </script>
Langkah 7Simpan template, preview blog anda dan klik salah satu gambar pada artikel blog anda...
Source : modification-blog.blogspot.com
Ditulis Oleh : Unknown ~ Blogger Kalianda
Sobat sedang membaca artikel tentang Membuat Effek Zoom Gambar di Blog. Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, dan jangan lupa untuk follow dan meninggalkan komentar sobat.
ok gan.. tancap dan langsung praktek thanks ya
ReplyDeleteTks Tipsnya Mas
ReplyDeleteudah dipasang ... tp efeknya blm kliatan... masih mau coba2 lagi
thanx infony...tp kok effectny ga muncul2 yah...mlingsep
ReplyDelete