LightBox Untuk Blogspot

Inginkan paparan gambar kelihatan lebih menarik sewaktu di view?
Meh nak kenalkan sikit dengan LightBox.. huhuhu..
Dulu aku ada pakai tapi sekejap je dengan galakan dari Chokilala..
Sekarang aku nak aktif balik guna benda ni..
Puas mencari dan mencuba teknik2 lightbox nie..
Ada yang menjadi ada yang tidak.. Ada yang jadi tapi tak sempurna sifatnya..
harharhar.. Last sekali pakai jugak la kod dari website ni Blogger Widgets..
Ada yang senang pakai je la.. kui3

Demo di Bawah sila klik gambar.. ^__^

Web ni ngajor dalam omputih, aku ngajor dalam melayu.. =p

Cara Untuk Pasang :

Masuk ke Blogger Dashboard

Pilih Layout > Edit HTML (jgn lupa tick kotak Expand Widget Templates)

Cari kod </head> kemudian ganti dengan kod kat bawah ni dan save template..

<!--Light Box Code Starts Bloggerplugins.ORG-->
<style>
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer&gt;#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6F_DkiJRlogTLQdQ7TWZsftJ1gzH_5PqcCAIButNGvwMB4fVmPMk4y8IDfGSpkOr97JSjczeuJIXddR_tEbGhsqXub8XtcVDuPf1hvGbAL6drEm-OSQ6fEMPefaEC_d7yUK2mo_OFSLE/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwBGJYd6UPPc_Qqt6Dhkm7BtU93bxLGkyolHM3EmKdF1xQtCxsg_m-CCauChKnTUWtXK5fi5eO5GfyMjXz7r0eoDkn-4n94FDnLhOT03ylZrTh6IrbGCl7u6MnSvOz6EINxpf_Hw4lXhQ/) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
</style>

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/>
<script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/>
<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>
<!--Light Box Code Ends Bloggerplugins.ORG-->
</head>

Cara Untuk Guna :

Posting > Edit Post

Tukar kod onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"
dengan rel="lightbox" title="tajuk gambar" atau rel="lightbox[happy]" title="tajuk gambar" untuk menjadi galeri gambar..

Pastikan buang -h di hujung s1600-h

Ok! Siap untuk di gunakan.. Senang je pun.. ^___^

Credit to : Blogger Widgets