10/07/11 ~ Boedhye ThejoE

Nah,berikut tips yang tak kalah menarik dalam belajar mempercantik dan menghias blog,yaitu trik meperbesar (zoom) gambar atau image pada blogger secara otomatis hanya dengan meletakkan pointer mouse di atasnya dan mengkliknya, Seperti isi dari beberapa postingan gambar d blog ini.Ilmu ini chiyeee (Kanuragan Kali)

Langkah Cara Membuat Zoom Gambar / Image Blog Blogspot

Seperti biasa Mas Bro,teknik zoom gambar blog ini kita menggunakan metode css javascript.
Pertama,sobat blogger 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 :P

gb1

gb2

gb3

Kemudian,cari kode </head> dan tepat diatasnya letakkan barisan kode css berikut:

<script   src='http://kumputervsayam.blogspot.com/2011/10/zoom-gambar-image-posting-blog.html'  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 Mas Bro..N Smoga Sukses..Heheheh!!

Posted By: