Light Box Image Viewer For Blogger

Haiii ,UKK di sekolah gwdah selesai nihh ,,,,mari kita lanjutkan memposting Trik Blogger



Kali ini gw share memberikan Image Viewer dengan Light Box

untuk demo klik gambar berikut ini

Gmana ?? udah tau kann oke langsung saja

1. Login ke akun Blogger kalian
2. Masuk ke Rancangan (design) lalu klik Edit HTML
3. Cari kode </head>
4. Lalu letakkan kode berikut dibawah nya

1. <!--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/AVvXsEgr3jfoJLTq6R21y0BUHT3FLkoKGUIDem_QCnStbSR_OvGoYzdeGv2fyL1uaKR6TFJ8USnD0i40U_yikY9ZLo61lta28UFKBprioyryOxg8gBRcrO5RuJzvT5a2IqEn0JohbPPxGRP-Ij8/) left 15% no-repeat; }
   #nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJOnIWofDxQp958hyhgGdjJOBMy8a795sdlJI7kC9IxCcJysoROchzuaQ82a9iuJ37QT1eeelXxiB1ZWLJFcdoRteVIGjIOOJA_EDH_lFiNXWUyjgiikOzt0i_-Ztu8l1PISItuNE97pY/) 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; }
   </style>
   <script src='http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js' type='text/javascript'/>
   <script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' type='text/javascript'/>
   <script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>
   <!--Light Box Code Ends Bloggerplugins.ORG-->

Selesai deh kode tersebut aktif di semua gambar postingan