Lightbox Image Otomatis Untuk Blogger

Untuk wordpress cukup mudah memasang image lightbox, cukup dengan mencari plugin pasang dan selesai. Namun lain halnya dengan Blogger / Blogspot cara untuk memasang image lightbox.

Nah, berikut caranya :

1. Cari kode ]]></b:skin> kemudian masukkan kode berikut tepat diatasnya :

#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}

2. Setelah itu cari kode </body> dan sisipkan pula kode berikut tepat diatasnya :

<script src='http://lightbox-blogger.googlecode.com/files/jquery.min.js' type='text/javascript'/>
<script src='http://lightbox-blogger.googlecode.com/files/lightbox.min.js' type='text/javascript'/>

Jika setelah kedua kode tersebut dimasukkan seharusnya sekarang web blogger Anda sudah memiliki image lightbox otomatis tanpa harus memberikan kode2 khusus pada saat memasukkan image kedalam postingan.

Selamat mencoba dan mohon maaf jika ada kekurangan ….. 🙂

Lightbox Image Otomatis Untuk Blogger

Related Search

Related Post "Lightbox Image Otomatis Untuk Blogger"