Mempercantik lightbox blogger dengan JQuery - Mari Belajar - Belajar dimana saja dan kapan saja.
Terbaru
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

Pemberitahuan
Selamat datang di blog Mari Belajar.
Ayo bagikan kebaikan dengan membagikan artikel yang bermanfaat di blog Mari Belajar ke sosial media kalian.
Jangan lupa untuk like dan follow sosial media Mari Belajar untuk mendapatkan materi belajar terbaru setiap harinya.
Tutup