Posted by Aak
Aak-share.com Updated at: 11:43:00 PM

Cara Membuat Custom jQuery Lightbox pada Blog

No comments:
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!

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments