Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

cara pasang gambar lightbox blogspot

Effect ligthbox memang menarik sekali untuk diterapkan pada blog, juga akan menjadikan blog kita terkesan lebih profesional.
Menyebalkan sekali ketika kita mengklik gambar pada blog atau website yang akan membawa kita pada suatu halaman kosong yang hanya berisi gambar tersebut, dan untuk kembali ke halaman blog tadi otomatis kita harus mengklik back tab atau menu klik kanan back yang tentunya kita harus menunggu loading dari halaman blog tersebut. Tapi akan lain hal-nya jika kita menambahkan effect lightbox, kita akan dibawa pada hal halaman berbackground hitam (bervariasi tapi disini saya pakai background hitam) tanpa meninggalkan halaman blog tersebut.
Nah berikut ini cara-cara untuk menambahkan effect lightbox pada gambar blog :

1.Login ke Blogger Dashboard
2.Rancangan > Edit HTML
3.Cari kode berikut

</head>

4.Ganti dengan kode dibawah ini :

<!--start Light Box Code core-net styles--!>
<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(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; }
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'/>
<!--Light Box Code Ends core-net styles-->
</head>

Sekarang Anda telah menambahkan skrip dan gaya yang diperlukan untuk effect lightbox.
Anda juga dapat menambahkan keterangan untuk foto dan juga mengelompokkan beberapa gambar menjadi  seperti sebuah galeri ..


5. Tambahkan atribut rel="lightbox" title="Your image Caption" pada link gambar anda :

contoh : <a href="url-gambar" rel="lightbox">

6.Untuk membuat gallery format-nya seperti berikut : 
rel="lightbox[namaalbum]" title="judul album"

contoh : <a href="url-gambar" rel="lightbox[namaalbum]" title="judul album">

selesai deh pembuatan effect ligthbox-nya untuk demo klik gambar dibawah
(update untuk DEMO lightbox disini)
Demo single image


Demo galery image 
Lightbox yang satu ini akan ada next dan Prev tab


Semoga anda berhasil...


This post first appeared on CORE-NET Netting Styles -Info Teknologi| Tips N Tr, please read the originial post: here

Share the post

cara pasang gambar lightbox blogspot

×

Subscribe to Core-net Netting Styles -info Teknologi| Tips N Tr

Get updates delivered right to your inbox!

Thank you for your subscription

×