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.

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

4 Response to "Zoom Gambar Blogger Dengan Auto Highslide"

Anonymous mengatakan...

Zoom Gambar Blogger dengan AUTO HIGHSLIDE

fajar mengatakan...

maksudnya sebelum dan sesudah itu apa? kurang jelas, mohon bantuannya.. terima Kasih.

kaos couple mengatakan...

bisa otomatis gak gan? jadi tiap ada gambar pada posting bisa langsung tampil zoom setelah di klik.

Anonim mengatakan...

mantap ..

Powered by Blogger