Effect Lightbox untuk Blogger

Ini juga keren loh..langsung masuk saja deh...

1.Masuk ke blogger kalian,rancangan,edit HTML dan jangan lupa save dulu biar aman...xixixi...lalu..
2. Cari kode </head>
3.Lalu simpam kode ini diatas kode 2


<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/AVvXsEipfyrpbqA5ZBN9n5oqCEcakf0wX_1UWoxZbZo1twGMnnv2gIGgQKkJ8-iN0Sw7n8BP9mUaboHKzxf86n62Vk66bd_AQEj-2d0voGqhp8g8c2A3mHIrf_HYPZRG9OaBvPnmZhRVuMXTLOQ/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH3QeAG0SfqheBHpTO6uygP4KQq-1RCBT7r-qN8d77S0e3Uiz9vyxS-dcZuimDFAGh6nQRjh4AacxZ8LR5HPgtYzpRSpNi8mzMZGDJ57THeArRhTKadfLylqepApByIZ8P2u7eAelNMH4/) 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'/>

Setelah itu dalam aplikasinya dala posting kita tulis begini :

<a href="http://alamatgambar1.jpg" rel="lightbox" title="Your Image Caption"><img src="http://alamatgambar2.jpg"></a>

http://alamatgambar1.jpg,diisi dengan alamat/URL gambar yang akan muncul ketika gambar diklik.

http://alamatgambar2.jpg,diisi dengan alamat/URL gambar yang akan muncul pada postingan blog kita.

rel="lightbox",Untuk menambahkan efek lightbox pada gambar

PS :

kalau sumber gambar yg kita upload berasal dari komputer kita sendiri, alamat gambar yang muncul akan mengandung -h contoh

href="http://8.bp.blogspot.com/_4fVBL4fjrFI/SWo77fyamZc/AAAAAAAAB5U/JPdx2BcMh2s/s1600-h/mobil.png"

Hapus s1600-h/ pada alamat gambar tersebut sehingga menjadi seperti ini:

href="http://8.bp.blogspot.com/_4fVBL4fjrFI/SWo77fyamZc/AAAAAAAAB5U/JPdx2BcMh2s/mobil.png"

Bingung ???
Lihat contoh ini saja langsung

<a href="http://i1220.photobucket.com/albums/dd457/anni2811/bb2.jpg" rel="lightbox" style="margin-left: 1em; margin-right: 1em;" title="BacklinkSPEDD"><img height="320" src="http://i1220.photobucket.com/albums/dd457/anni2811/bb2.jpg" width="235" /></a>


http://i1220.photobucket.com/albums/dd457/anni2811/bb2.jpg, ganti dengan alamt penyimpanan gambar kalian!

contoh bisa dilihat DISINI!!