Lightbox Image Otomatis Untuk Blogger

In Tutorial, Web 1022 views

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

Install Pi-Hole DNS Blokir Iklan dan Tracker
Install Pi-Hole DNS Blokir Iklan dan Tracker
Pi-Hole merupakan salah satu pelindung user internet
Migrasi VPS Panel dari Tuxlite ke VestaCP
Migrasi VPS Panel dari Tuxlite ke VestaCP
Setelah sekian lama menggunakan Tuxlite akhirnya diputuskan
Cara Cepat Root Unlock STB ZTE B760H Tanpa Bongkar
Cara Cepat Root Unlock STB ZTE B760H Tanpa Bongkar
Mungkin beberapa ada yang pernah berlangganan Indihome
Upgrade PHP 5.6 ke PHP 7.0 Nginx Debian Jessie
Upgrade PHP 5.6 ke PHP 7.0 Nginx Debian Jessie
Sebetulnya sudah agak lama warning untuk upgrade

Top