Selasa, 04 Oktober 2011

Cara Membuat ScreenShot Image di Blog


Blogger Walking, Sudah tau ScreenShot itu apa kan?
If not yet, I'll give U some information about that,, Hhehee
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.

Inilah cara untuk memasang ScreenShot pada blog kamu :
1. The First step, Log In ke account blog kamu

2. And the second step choose Rancangan > Edit HTML (Centang/Ceklist Expand Template Widget nya yah...) 
3. Cari kode </head> atau jika sobat bingung tekan Ctrl+F untuk menampilkan mesin Pencarian.
4. Copy 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 or Save template
And then....Lihat hasilnya, jika gambar pada posting sobat di klik, maka gambar tersebut seperti tampil pada layar/desktop.

*Selamat mencoba Guys... Good Job!

Tidak ada komentar:

Posting Komentar