Efek Zoom di Blog dengan Javascript

Blogger pasti suka blog mereka itu exlusive!! ya ngga??. Nah, untuk mempercantik blog ada beberapa cara yang harus dimulai. Dari hal tampilan blog, isi dalamnya, dan yang menarik adalah efek zoom gambar!

Kebayangkan kalau kita klik gambar tapi di arah kan ke linknya?? Nah dengan menggunakan javascript ini blogger lain dapat merasakan kecanggihan dari effect tersebut!. Effect zoom ini berprinsip seperti di facebook, tentu saja tidak secanggih facebook. Kalau mau merasakan di coba gan. :)

Ane pilih model Katy Pary gan. Dia itu IMUT2!! trus anak yang solehah.. heheh :).

Nah.. untuk mempersingkat waktu anda membaca, yuk kita COBA!!! (nb: perasaan blogger jarang lah yg baca pendahuluan, hehhe no problem)

Chapter One
1. Klik "Rancangan" 
2. Kemudian "EDIT HTML"
3. Jangan lupa untuk mencentang "EXPAND TEMPLATE WIDGET"




Chapter Two
1. Selanjutnya cari kode </head> (tips : Gunakan CTRL+F untuk mencari kode)
2. Letakan script di bawah ini tepat diatas </head>

<script src='http://kindi-yanuar-project.googlecode.com/files/kindi92.blogspot.com.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>

3. Pada tulisan yg saya warnai merah sangat sensitif!! Saya anjurkan untuk menambahkan huruf besar di dalamnya seperti GIF|JPG|PNG dll.

JANGAN LUPA DI SAVE YA!!! :)))))))

Semoga bermanfaat!! oh sampai lupa credit buat nih situs www.roadrash.no mantap bgt gan!!! 

Posted in: Blog