Memasang Efek Light Box Blogger

Light Box merupakan salah satu fasilitas blogger yang paling baik. Dengan menambahkan add on ini, gambar kita akan mendapatkan efek cahaya yang sangat elegant.

OK. Bagi yang ingin tahu cara buatnya saya akan memaparkannya.

1. Login ke Dashboard anda

2. Masuk ke Layout > Edit HTML

3. Cari Kode </head>

dan masukan kode berikut ini di atasnya :

<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>#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/AVvXsEgCBIPs6JFl9NWe8rbViF1uqUaigyXjZ9Jzuiw4pfdGO_f5AK2FFnViLrjwyILBkHDGjWSowIyz_uSshSOmX17-yev22uupNy5nbcPgG0WUA8sxiNuX6Yzp0KwXBeqV0_92tfgL0pi8d1g/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3c9LfrUhJDC58kSfhTXyza93d_jvF3gWYXGh8RAfXak8KgOmEia3p7xrXJuVryHgg3-4p2Sj0JomgihyUf6sgKDDYM7XFv3DO9bziLKnvPnZ-9cj0UHvBYy_fUB2kDV5-RlSbzVR5yLI/) 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'/>

4. Save template anda

Semoga bermanfaat

Sumber : Fhajar