Langsung saja
1. Login ke blogger - Rancangan - Edit HTML - centang Expand Template Widget
2. Copy kode ini tepat diatas </head>
<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>
3. Simpan template
4. Untuk membuat tampilan zoom, setiap kamu posting gambar, jangan lupa copy code dibawah ini
<div class="thumbwrapper"> <a class="highslide" href="url gambar" onclick="return hs.expand(this, galleryOptions)"><img alt="Highslide JS" src="url gambar" height="150" width="150" title="Click to enlarge" /> </div>
0 komentar:
Posting Komentar