Lightbox Effect for Image Special for Blogger

Back to the issue. Selalu menarik membahas trik satu ini. Banyak varian, jenis, gaya, selalu menjadi sorotan didunia per-jQuery-an :D Lightbox sendiri banyak kegunaannya buat mempercantik penampilan blog kita tercinta :x
Coba tengok artikel berikut cara membuat ! Sangkin banyak artikel mengenai lightbox diluaran sana, membuat Beben Koben si Bloglang anu ganteng kalem tea ini kebelinger dalam memilihnya. Pada blog Prodigy of Head juga telah dimasukin trik yg hasilnya mirip kek lightbox juga kok (~~promosi~~) :D

Click Here for Look my Lightbox Effect
Seperti itu tidak jauh yg dimaksud dengan efek kotak cahaya :P Kalo versi Beben, script dan kode-kode sederhana, tapi ribet dalam pemakaiannya sob :-s
Tapi yang akan Beben sharing dan bagi buat sobat blogger sekalian disini script and pemakaian yang simpel banget ;) This trick come from our master :-"
Cara dan demo bisa bos lihat dimari Full Size Images in a LightBox for Blogger. Walau berbahasa inggris, tapi karena mudahnya maka sobat-sabit tinggal mengikuti langkah-langkahnya saja :"> Yaitu meletakkan script berikut diatas tag </head>

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://jsblogstop-blogger-feed-tools.googlecode.com/svn/trunk/jsBloggerLightBox.js" type="text/javascript"></script>

Script warna biru itu sama dengan jQuery script versi terakhir
https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
Jika sudah ada jangan dipake lagi, masukin ajah script yg satunya lagi ya ;)

jsBloggerLightBox Script Min.

<script type='text/javascript'>//<![CDATA[/*** @author James Simpson* Website: http://www.jsblogstop.com* Numpang beken: http://beben-koben.blogspot.com*/var jsBloggerLightBox=function(){var $lightbox,$lightboxImg,linkImg=function(){var $img=$(this),$parent=$img.parent();if($parent[0].nodeName=="A"&&($parent.attr("href").search("blogspot.com")!=-1||$parent.attr("href").search("googleusercontent.com")!=-1)){$img.attr("title","Click to View Full Size");$img.attr("data-enlarge-src",$parent.attr("href"));$img.click(jsBloggerLightBox.show);$parent.attr("href","javascript:void(0);");}};this.init=function(){$("body").prepend("<div id='js-lightbox'><img id='js-lightboxImg'/><div id='js-lightbox-close'>Close</div></div>");var style="<style type='text/css'>"+"#js-lightbox {overflow:auto;display:none;position:fixed;top:0;left:0;height: 100%;width: 100%;text-align:center;z-index:100;background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAHUlEQVQ4jWNgYGBooDIeNXDUwFEDRw0cNXBkGggAz03IAdLRzTEAAAAASUVORK5CYII=) repeat scroll top left;}"+"#js-lightbox img {margin:0 auto;position:relative;top:10px;border:1px solid #333;box-shadow:0px 0px 5px #777;padding:10px;background-color:#333;max-height:100%;width:auto;border-radius:5px;}"+"#js-lightbox-close {padding:5px;margin:5px auto;width:80px;border:3px solid #333;background-color:#f00;color:#fff;font-weight:bold;cursor: pointer;border-radius:5px;}"+"</style>";$("head").append(style);$lightbox=$("#js-lightbox");$lightboxImg=$("#js-lightboxImg");$("#js-lightbox-close").click(function(){$lightbox.fadeOut();});$(".post-body img").each(linkImg);};this.show=function(){$lightboxImg.attr("src",$(this).attr("data-enlarge-src"));$lightbox.fadeIn();};$(document).ready(this.init);return this;}();//]]></script>

Lightbox ini terintegrasi langsung dengan basic's engine blogger blogspot. Secara otomatis jika ada syntax image akan langsung bisa menghasilkan efek lightbox. Default image syntax jika telah beres upload

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfUUxQzMxQuSD8LaE07nupd-lAa1S8xXea10a5bMOz3jSmZ45A12UUuF3SBkD6MpZ9E7GD0UY0X7NOVL_8rra_4AXPS9m6IEfT8M5UxC-K4ghUBdFjgpbBtoN2rMp-R3IAxDvYf3M2E-yj/s1600/Prodigy-of-Head.png"><img style="cursor: pointer; cursor:hand;width: 49px; height: 72px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfUUxQzMxQuSD8LaE07nupd-lAa1S8xXea10a5bMOz3jSmZ45A12UUuF3SBkD6MpZ9E7GD0UY0X7NOVL_8rra_4AXPS9m6IEfT8M5UxC-K4ghUBdFjgpbBtoN2rMp-R3IAxDvYf3M2E-yj/s320/Prodigy-of-Head.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5616989407750519954" /></a>

Hapus kode yg diberi warna ijo tua. Beres deh, sobat langsung bisa merasakan fitur ini :) Good luck...
Happy lightbox \m/