freebitco.in

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

Setup Storage Path The Dude di RB750G r3
Setup Storage Path The Dude di RB750G r3
The Dude merupakan tool yang cukup penting
Install Teamviewer via Terminal di Ubuntu 18.04 Bionic Beaver
Install Teamviewer via Terminal di Ubuntu 18.04 Bionic Beaver
Aku coba install Teamviewer menggunakan GUI tapi
Setup Raspberry Pi 3 Video Resolution
Setup Raspberry Pi 3 Video Resolution
Raspberry Pi, saat ini bisa menjadi alternatif
Mengatasi Ubuntu 16.04 Yang Hang Pada Saat Reboot atau Shutdown
Mengatasi Ubuntu 16.04 Yang Hang Pada Saat Reboot atau Shutdown
Pada beberapa laptop terkadang Ubuntu yang sudah

Top