Cara Membuat ScreenShot Image Blog

Sobat blog,, Sudah tau ScreenShot itu apa ?
kalo belum ya saya kasih tahu,, hee
ScreenShot adalah sebuah tampilan sebuah gambar dari sebuah blog, jadi tidak perlu membuka gambar ke tab baru, ketika gambar di klik maka gambar akan tampil ke layar (desktop).

ini caranya untuk memasang ScreenShot pada blog :
1. Masuk ke account blog sobat
2. Rancangan -> Edit HTML (Centang Expand Template Widget)
3. Cari kode </head>
4. Taruh Script berikut tepat diatas kode </head>

<script src='http://ak91-projectx.googlecode.com/files/AK91-fullzoomlengkapbanget.js' type='text/javascript'/>
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="http://ak91-projectx.googlecode.com/files/highslide.css" />/*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: 55px;
font-size: 10.9px;
}
</style>

 5. Simpan template
Lihat hasilnya, jika gambar pada posting sobat di klik, maka gambar seperti tampil pada desktop.