 |
| Lightbox Pada Gambar Blog |
Cara Membuat Lightbox Pada Gambar Blog - Postingan ini merupakan insiprasi template yang saya gunakan, Pada Kesempatan ini ( Tutorial Belajar Blog) akan memberikan Javascript untuk membuat Lightbox ini terotomatisasi pada setiap gambar yang ada pada postingan blog/web anda.
Apa Itu Lightbox Gambar , Lightbox itu Sejenis Pop Up, Tetapi Bukan Pop Up,Lightbox gambar itu Jika Di Click pada gambar kemudian muncul kotak yang muncul pada saat mengklik atau melihat suatu gambar.
Contoh Tampilan
Untuk memasang Lightbox Gambar Pada Blog dengan Jquery ikuti langkah-langkah berikut :
1. Login akun Blogger anda.
2. Pada Dashboard pilih Template » Edit HTML
3. Letakkan kode berikut ini dibawah kode ]]></b:skin>
#jquery-overlay{position:absolute;
top:0;left:0;z-index:90;
width:100%;height:500px}
#jquery-lightbox
{position:absolute;top:0;left:0;width:100%;
z-index:100;text-align:center;line-height:0}
#jquery-lightbox a,#jquery-lightbox a:hover
{border:none}
#jquery-lightbox a img{border:none}
#lightbox-container-image-box
{position:relative;background-color:#fff;border-radius: 5px 5px 0px 0px;
width:250px;height:250px;margin:0 auto}
#lightbox-container-image{padding:10px}
#lightbox-loading{position:absolute;top:40%;left:0%;
height:25%;width:100%;text-align:center;
line-height:0}
#lightbox-nav{position:absolute;top:0;left:0;
height:100%;width:100%;z-index:10}
#lightbox-container-image-box > #lightbox-nav{left:0}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext
{width:49%;height:100%;zoom:1;display:block}
#lightbox-nav-btnPrev{left:0;float:left}
#lightbox-nav-btnNext{right:0;float:right}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;
background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;
width:100%;padding:0 10px 0;border-radius: 0px 0px 5px 5px;}
#lightbox-container-image-data
{padding:0 10px;color:#666}
#lightbox-container-image-data
#lightbox-image-details
{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:bold}
#lightbox-image-details-currentNumber
{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;
padding-bottom:0.7em}
Kemudian letakkan kode berikut ini diatas kode </body>
<script src='http://lightbox-blogger.googlecode.com/files/lightbox.min.js' type='text/javascript'/>
Simpan Template Kemudian Lihat hasilnya dengan klik gambar pada postingan anda.
Artikel keren lainnya:
Belum ada tanggapan untuk "Cara Membuat Lightbox Pada Gambar Blog"
Posting Komentar