Effec Zoom pada gambar blog

Coba klik pada gambar di bawah ini...gimana keren ngak lok kalian ingin tahu cara pembuatan nya ikuti terus tutorial nya yach..pertama kamu siapin gambar yang akan kamu pasang baik itu berupa gambar atau foto kalian nah gini cara memasang kode  css nya

1. Pertama kalian login dulu ke blogger
2. masuk ke rancangan edit html (download lengkap dulu template sobat takut kalok gagal)
3. expand widget templates cari kode </head> letak kan kode css di bawah ini tepat di atas kode </head> 
4. Berikut kode css nya 
<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>
5. Lalu simpan template

untuk pemasangan di postingan pake kode html di bawah ini

<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>
</div>

KETERANGAN

Ganti teks yang berwarna merah dengan alamat link sobat yang akan di tuju
Untuk teks yang berwarna hijau ganti dengan alamat url gambar sobat sendiri ..oke selamat mencoba