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

About Rio Apri

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.

4 Discussion:

  1. thnks sob,,,
    keren postingannya..
    blognya jg sahsyat... hehehe. :D

    BalasHapus
  2. Wahh blognya keren bro...

    boleh gk bro di ajarin ??
    aku pengen ..^^

    www.pangerangothic.blogspot.com

    BalasHapus
  3. @Cheater Community kunjungi terus aja ni blog ntar w kasih trik triknya kok

    BalasHapus