Membuat Zoom Pada Gambar Ketikan Pointer Mouse Ada di Atasnya

Zoom Gambar Blog / Membuat Efek Zooming Pada Image / Gambar di Blogger

Membuat Zoom pada Gambar / Image Blog

Nah,berikut tips yang tak kalah menarik dalam belajar mempercantik dan menghias blog,betul gan,trik meperbesar (zoom) gambar atau image pada blogger secara otomatis hanya dengan meletakkan pointer mouse di atasnya dan mengkliknya..

Tips Memperbesar Gambar (zoom),Saat Pointer Mouse Berada di Atasnya

Nah,berikut ini tips yang tak kalah menarik dalam belajar mempercantik dan menghias blog,betul gan,trik meperbesar (zoom) gambar atau image pada blogger secara otomatis hanya dengan meletakkan pointer mouse di atasnya dan mengkliknya..Ini saya dapat dari sebuah blog yang bagus banget di www.pelajaran-blog.blogspot.com

contoh klik ada gambar di bawah ini ya....

Langkah Cara Membuat Zoom Gambar / Image Blog Blogspot

Seperti biasa gan,teknik zoom gambar blog ini kita menggunakan metode css javascript.
Pertama,sobat blogger pergi ke sawangan depok,eits salah ,maksud ane pergi ke dashboard lalu pilih tata letak / rancangan kemudian edit html  dan checklist (contreng) tulisan expand widget templates


Kemudian,cari kode </head> setelah ketemu dan tepat diatasnya letakkan barisan kode css berikut:

<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/zoompelajaranblog-fullzoomlengkapbanget.js' type='text/javascript'/>
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="http://www.roadrash.no/hs-support/highslide/highslide-ie6.css" /> <![endif]-->
<script type='text/javascript'>
//<![CDATA[
hs.graphicsDir = 'http://www.roadrash.no/hs-support/highslide/graphics/';
hs.wrapperClassName = 'borderless';
hs.align = 'center';
hs.dimmingOpacity = 0.65;
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
// close button
hs.registerOverlay({
html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
position: 'top right',
fade: 2 // fading the semi-transparent overlay looks bad in IE
});
hs.isUnobtrusiveAnchor = function(el) {
if (el.href && /.(jpg|gif|png)$/.test(el.href) && !el.onclick) {
el.className = 'highslide'; // for the zoom-in cursor
el.title = 'Click to enlarge'; // for title
return 'image';
}
};
if (hs.addEventListener && hs.Outline) hs.addEventListener(window, 'load', function () {

new hs.Outline('rounded-white');

new hs.Outline('glossy-dark');

});
// The gallery example on the front page
var galleryOptions = {

slideshowGroup: 'gallery',

wrapperClassName: 'dark',

//outlineType: 'glossy-dark',
dimmingOpacity: 0.8,
align: 'center',
transitions: ['expand', 'crossfade'],
fadeInOut: true,
wrapperClassName: 'borderless floating-caption',
marginLeft: 100,
marginBottom: 80,
numberPosition: 'caption'

};
if (hs.addSlideshow) hs.addSlideshow({
slideshowGroup: 'gallery',
interval: 5000,
repeat: false,
useControls: true,
overlayOptions: {
className: 'text-controls',
position: 'bottom center',
relativeTo: 'viewport',
offsetY: -60
},
thumbstrip: {
position: 'bottom center',
mode: 'horizontal',
relativeTo: 'viewport'
}
});
hs.Expander.prototype.onInit = function() {
hs.marginBottom = (this.slideshowGroup == 'gallery') ? 150 : 15;
}
// focus the name field
hs.Expander.prototype.onAfterExpand = function() {

if (this.a.id == 'contactAnchor') {
var iframe = window.frames[this.iframe.name],
doc = iframe.document;
if (doc.getElementById("theForm")) {
doc.getElementById("theForm").elements["name"].focus();

}
}
}

//]]>
</script>
<style type='text/css'>
pre {
background: white;
padding: 5px;
font-size: 10.9px;
}
</style>

Setelah itu sobat simpan templates ya.
Selanjutnya,untuk menampilkannya sobat bisa letakkan kode berikut di postingan sobat (ini hanya contoh saja)

<div class="thumbwrapper">
<a class="highslide" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6J2_ZQkFXILv1MatjJ8MsebEncWdWOcQ2rQ1zprue4m5G9O2f-ics-hdj7kOF2z6OfOFguoNojUJenwOkcJuFqqyARiNS5cCS7KZbpxOmX3-B6vC3s_SFZp66SBSpeFpjLQV0_90tjemI/s320/DSC00247.JPG"><img alt="Highslide JS" height="150" src="http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6J2_ZQkFXILv1MatjJ8MsebEncWdWOcQ2rQ1zprue4m5G9O2f-ics-hdj7kOF2z6OfOFguoNojUJenwOkcJuFqqyARiNS5cCS7KZbpxOmX3-B6vC3s_SFZp66SBSpeFpjLQV0_90tjemI/s320/DSC00247.JPG" title="Click to enlarge" width="150" /></a>
<a class="highslide" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7U8cKnKpmdIkX1Jt4yGZtBOlKwvg1ie3nXToIaqw-6rfIKpQ5vGW1t3tdrCobmMXnSpJwRpbVI-itoLL7NDkr7cOeux0G2z2tmxPImzx3vSgW04_jcit7JY8vdIMF-lTvBz3RKBMaCcL0/s1600/DSC00248.JPG"><img alt="Highslide JS" height="150" src="http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7U8cKnKpmdIkX1Jt4yGZtBOlKwvg1ie3nXToIaqw-6rfIKpQ5vGW1t3tdrCobmMXnSpJwRpbVI-itoLL7NDkr7cOeux0G2z2tmxPImzx3vSgW04_jcit7JY8vdIMF-lTvBz3RKBMaCcL0/s1600/DSC00248.JPG" title="Click to enlarge" width="150" />
</a></div>

Ket:
Tulisan berwarna merah sobat ganti ya dengan url / alamat dari gambar yang sobat telah upload di blogger atau dari suatu situs.
sampai disini dulu ea....... 

ORANG YANG BISA KARENA DIA TERBIASA JADI BERUSAHALAH