Posted by : Ryo Apri 15 Jun 2012

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(http://lh5.ggpht.com/_u4gySN2ZgqE/SnWk89-4azI/AAAAAAAAAj8/hM0MqnVouCQ/prevlabel%5B3%5D.gif) left 15% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(http://lh6.ggpht.com/_u4gySN2ZgqE/SnWk9-mNiQI/AAAAAAAAAkA/Zg1jXV9xnQM/nextlabel%5B6%5D.gif) 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

{ 4 Discussion... read them below or Comment }

  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

Welcome to My Blog

Banner

banner banner banner banner

Follow

Blog, Blogger, Tips, Tricks, Music, Ryo, Apri, R-Ryuzaki™, Ryo Apri, Science, software, template, colour code, social, Game, l-nino Blog, Blogger, Tips, Tricks, Music, Ryo, Apri, R-Ryuzaki™, Ryo Apri, Science, software, template, colour code, social, Game, l-nino

- Copyright © 2013 RLanzer -Robotic Notes- Powered by Blogger - Designed by Johanes Djogan -