Lightbox Image Otomatis Untuk Blogger

In Tutorial, Web

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 ….. 🙂

Related Search

Anda sedang membaca artikel tentang Lightbox Image Otomatis Untuk Blogger. Silahkan baca artikel Be Log tentang Tutorial, Web lainnya. Semoga bermanfaat ...

Mikrotik Duckdns.org Update (New Script)
Mikrotik Duckdns.org Update (New Script)
Entah kenapa script untuk update Dynamic IP
Mengatasi Stiker Whatsapp Yang Tidak Muncul Di Android
Mengatasi Stiker Whatsapp Yang Tidak Muncul Di Android
Wahtsapp baru-baru ini merelease stiker untuk penggunanya,
SSL Gratis Dari LetsEncrypt
SSL Gratis Dari LetsEncrypt
Untuk mendapatkan SSL Ceritificate mungkin tidaklah semurah
Setup Storage Path The Dude di RB750G r3
Setup Storage Path The Dude di RB750G r3
The Dude merupakan tool yang cukup penting

Top