Home  ›  Tutorial Blog

Cara Membuat Custom jQuery Lightbox pada Blog

Written By PENDIDIDKAN Wednesday, September 17, 2014 Add Comment Edit
Cara Membuat Custom jQuery Lightbox pada Blog - Lightbox adalah sebuah halaman yang akan terbuka atau muncul saat gambar di klik. Fungsi dari Lighbox untuk menampilkan gambar dengan ukuran original pada artikel di halaman tersebut, sehingga pengunjung dapat melihat gambar tersebut lebih jelas.

Penggunaan lighbox dapat menampilkan penampilan yang lebih keren dan juga dapat mengurangi loading blog sehingga dapat lebih ringan,  Berikut adalah screen shootnya :

Jika anda ingin merubah tampilan dengan lighbox berikut ini langkah-langkahnya :

Cara Membuat Custom jQuery Lightbox pada Blog

L1 - Nonaktifkan fitur Lightbox bawaan Blogger

Langkah pertama anda perlu menonaktifkan fitur Lightbox bawaan Blogger, dengan masuk login keakun Blogger anda ► Setelan ► Pos dan Komentar ► Kemudain ubah opsi lighbox menjadi Tidak, Berikut adalah screen shootnya :

Jika sudah anda simpan setelan, terdapat dipojok kanan atas.


L2 - Penerapan CSS

Selanjutnya anda buka Editor template copy kode berikut sebelum kode ]]></b:skin>

#jquery-overlay {
height: 500px;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 90;
}
#jquery-lightbox {
left: 0;
line-height: 0;
position: fixed;
text-align: center;
top: 7% !important;
width: 100%;
z-index: 100;
}
#jquery-lightbox a, #jquery-lightbox a:hover {
border: none;
}
#jquery-lightbox a img {
border: none;
}
#lightbox-container-image-box {
background-color: #000;
border-radius: 8px 8px 0 0;
margin: 0 auto;
max-height: 560px;
max-width: 960px;
position: relative;
}
#lightbox-container-image {
padding: 10px;
}
img#lightbox-image {
max-height: 540px;
max-width: 940px;
}
#lightbox-loading {
height: 25%;
left: 0;
line-height: 0;
position: absolute;
text-align: center;
top: 40%;
width: 100%;
}
#lightbox-nav {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav {
left: 0;
}
#lightbox-nav a {
outline: none;
}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
display: block;
height: 98% !important;
width: 49%;
}
#lightbox-nav-btnPrev {
float: left;
left: 10%;
}
#lightbox-nav-btnNext {
float: right;
right: 10%;
}
#lightbox-container-image-data-box {
background-color: #000;
border-radius: 0 0 8px 8px;
font: 10px Verdana, Helvetica, sans-serif;
line-height: 1.4em;
margin: 0 auto;
max-width: 940px;
overflow: auto;
padding: 0 10px;
}
#lightbox-container-image-data {
color: #fff;
padding: 0 10px;
}
#lightbox-container-image-data #lightbox-image-details {
float: left;
text-align: left;
width: 70%;
}
#lightbox-image-details-caption {
font-weight: 700;
}
#lightbox-image-details-currentNumber {
clear: left;
display: inline-block;
padding-bottom: 1em;
}
#lightbox-secNav-btnClose {
float: right;
padding-bottom: .7em;
width: 66px;
}


L3 - Penerapan JQuery

Jika sudah langkah selanjutnya anda cari kode </head> copykan kode berikut sebelum </head>

<script src='https://aakyos.googlecode.com/svn/lighbox.js' type='text/javascript'/>

Ada satu opsi penambahan jQuery masih dalam penempatan yang sam letakkan sebelum kode </head>

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

Penjelasan :
Jika template sobat belum memiliki script jQuery, paste kode berikut tepat di atas kode yang tadi. Namun jika sudah, maka tidak perlu lagi.

Langkah terakhir simpan template dan lihat hasilnya.

Sekian dari saya Cara Membuat Custom jQuery Lightbox pada Blog, semoga bermanfaat!

0 Response to "Cara Membuat Custom jQuery Lightbox pada Blog "

Post a Comment

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel