Zoom Gambar Blog / Membuat Efek Zooming Pada Image

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..Ini saya dapat dari sebuah blog yang bagus banget di www.roadrash.no

klik aja gambar-gambar dibawah ini ya:  (ini foto cewek ane gan buat contoh.nye)

motor saya saat ini

click gambar untuk memperbesar

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 zoom gambar image blog.,maksud ane pergi ke dashboard lalu pilih tata letak / rancangan (gb1) kemudian edit html (gb2) dan checklist (contreng) tulisan expand widget templates (gb3) lihat gambar aja ya :D











gb1













gb2













gb3

Kemudian,cari kode </head> 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="http://1.bp.blogspot.com/-HnBZZrw91HA/TiKkxoOWiGI/AAAAAAAAA34/KY-2AU7-Ktk/s1600/pohon%2Bpelajaran%2Bblog%2Bzoom%2Bgambar.jpg" onclick="return hs.expand(this, galleryOptions)"><img alt="Highslide JS" src="http://1.bp.blogspot.com/-HnBZZrw91HA/TiKkxoOWiGI/AAAAAAAAA34/KY-2AU7-Ktk/s1600/pohon%2Bpelajaran%2Bblog%2Bzoom%2Bgambar.jpg" height="150" width="150" title="Click to enlarge" />
</a><a class="highslide" href="http://1.bp.blogspot.com/-3kr3pA6UAQc/TiKkxmuy8UI/AAAAAAAAA4A/-JQNIZQh9mc/s1600/pohon%2Bpelajaran%2Bblog%2Bzoom%2Bgambar%2B2.jpg" onclick="return hs.expand(this, galleryOptions)"><img alt="Highslide JS" src="http://1.bp.blogspot.com/-3kr3pA6UAQc/TiKkxmuy8UI/AAAAAAAAA4A/-JQNIZQh9mc/s1600/pohon%2Bpelajaran%2Bblog%2Bzoom%2Bgambar%2B2.jpg" height="150" width="150" title="Click to enlarge" />
</a>
</div>

Ket:
Tulisan berwarna merah sobat ganti ya dengan url / alamat dari gambar yang sobat telah upload di blogger atau dari suatu situs.
Moga berhasil dan met berpusinx ria ya :D see you!!

kalau yang ini bukan sob
hhhehehehehe

Sumber