Mempercantik lightbox blogger dengan JQuery

Gusti Ardias Riantono    Agustus 03, 2015    Tutorial    2 comments   

Mempercantik lightbox blogger dengan JQuery - Selamat pagi sobat! Selamat memulai aktivitas di pagi yang cerah ini. Pagi ini saya akan memberikan tutorial "mempercantik" lightbox blogger dengan JQuery. Bagi kalian yang tidak suka dengan lightbox yang sudah disediakan dari blogger, kalian bisa memodifikasi lightbox sendiri.

Baiklah, jika kalian ingin menggunakan lightbox ini ikuti langkah dibawah ini:

1. Tambahkan kode JQuery dibawah ini tepat di atas </head>
   

   <script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

   Lewati langkah ini jika sudah terdapat JQuery di blog kalian
2. Kemudian salin kode dibawah ini dan tempelkan tepat diatas kode ]]></b:skin>
   Ada 2 pilihan lightbox yang bisa kalian pasang (pilih salah satu)
   
   Lightbox tema berwarna hitam
   

   
   #jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;}
   #jquery-lightbox{position:absolute;top:10%;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:#000;max-width: 960px;max-height: 560px;margin:0 auto}
   #lightbox-container-image{padding:10px;}
   img#lightbox-image {max-height: 540px;max-width: 940px;}
   #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:10%;float:left}
   #lightbox-nav-btnNext{right:10%;float:right}
   #lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#000;margin:0 auto;line-height:1.4em;overflow:auto;max-width: 940px;;padding:0 10px 0}
   #lightbox-container-image-data{padding:0 10px;color:#fff}
   #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}
   

   
   Lightbox tema berwarna putih
   

   
   #jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;}
   #jquery-lightbox{position:absolute;top:10%;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;max-width: 960px;max-height: 560px;margin:0 auto;}
   #lightbox-container-image{padding:10px;}
   img#lightbox-image {max-height: 540px;max-width: 940px;}
   #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:10%;float:left;}
   #lightbox-nav-btnNext{right:10%;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;max-width: 940px;;padding:0 10px 0;}
   #lightbox-container-image-data{padding:0 10px;color:#555;}
   #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;}
   

3. Tambahkan kode javascript dibawah ini tepat diatas </head>
   samakan dengan tema lightbox yang telah kalian pilih sebelumnya
   
   Lightbox tema berwarna hitam
   

   
   <script src='https://googledrive.com/host/0BxZM0cdrVgKSLTVrVlRkRkZLa00/marbel-dark-lightbox.js' type='text/javascript'/>
   

   
   Lightbox tema berwarna putih
   

   
   <script src='https://googledrive.com/host/0BxZM0cdrVgKSLTVrVlRkRkZLa00/marbel-white-lightbox.js' type='text/javascript'/>
   

Tara... Selesai sobat, kalian bisa melihat langsung perubahannya :)
Selamat mencoba, semangat pagi~