Mempercantik lightbox blogger dengan JQuery - Mari Belajar - Materi, Soal, Jawaban dan Tutorial Untuk SD, SMP, SMA/SMK dan Kuliah
News Update
Loading...

Senin, 03 Agustus 2015

Mempercantik lightbox blogger dengan JQuery

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~

Share with your friends

2 komentar

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

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

      Hapus

Notification
This is just an example, you can fill it later with your own note.
Done