Zoom Gambar Blogger Dengan Auto Highslide

Ada berbagai macam tutorial tentang memperbesar gambar di blog. Kali ini saya menggunakan AUTO HIGHSLIDE untuk blogger, jadi cara memperbesar gambarnya adalah klik pada gambar maka otomatis gambar akan diperbesar tanpa berpindah halaman.

Contoh:

Penasaran ginama buatnya, langsung aja!!

Buka Blogger Dashboard >> Desain >> Edit HTML

Langkah 1: paste kode dibawah ini setelah 

<script src='http://sites.google.com/site/doartic/javascript/zoomhighslide/highslide-full.js' type='text/javascript'/>
<link href='http://sites.google.com/site/doartic/javascript/zoomhighslide/highslide.css' rel='stylesheet' type='text/css'/>
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="http://sites.google.com/site/doartic/javascript/zoomhighslide/highslide-ie6.css" /> <![endif]-->

<script type='text/javascript'>
//<![CDATA[
hs.graphicsDir = 'http://iamsura.fileave.com/graphics/';
hs.wrapperClassName = 'borderless';
hs.allowSizeReduction = false;
hs.showCredits = false;

hs.registerOverlay({
html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
position: 'top right',
fade: 2
});

hs.isUnobtrusiveAnchor = function(el) {
if (el.href && /\.jpg$/.test(el.href)) {
el.className = 'highslide';
return 'image';
}
}
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
function fixBloggerImages(searchFor, replaceWith) {
var href;
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++) {
href = anchors[i].href;
if(href.indexOf(searchFor) != -1) {
anchors[i].href = href.replace(searchFor, replaceWith);
anchors[i].setAttribute("onclick", "return hs.expand(this)");
anchors[i].setAttribute("class", "highslide");
anchors[i].setAttribute("title", "Click to enlarge");
}
}
}
//]]>
</script>

Langkah 2: paste script berikut sebelum 

<script language='JavaScript' type='text/javascript'>
fixBloggerImages(&quot;s1600-h&quot;, &quot;s1600&quot;);
</script>

setelah semua dikopi tekan SAVE. Buka langsung web Anda.

Catatan: Zoom Gambar Blogger dengan AUTO HIGHSLIDE

1. Zoom bisa digunakan untuk gambar.jpg
2. Gunakan server yang terpercaya seperti picasa agar gambar anda tidak dihapus