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='http://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~

Ditulis Oleh : Gusti Ardias Riantono ~ Mari Belajar

author-photo Kalian sedang membaca artikel tentang Mempercantik lightbox blogger dengan JQuery yang ditulis oleh Gusti Ardias Riantono. Kalian diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya juga ya :)




:: Salam ! ::

Don't forget, share and follow twitter Mari Belajar! :D

Post a Comment

  1. kalau mau berbagi jangan di blok dong, GAK BISA DI COPY..!

    ReplyDelete
    Replies
    1. Bisa kok, coba tunggu sampai loadingnya selesai :)
      Soalnya aku bisa copy sih.

      Delete

Powered by Blogger.