Memasang Custom jQuery Lightbox di Blog

Tutorial berikut ini akan membahas tentang cara mengganti Lightbox default bawaan Blogger dengan Custom jQuery Lightbox, Lightbox adalah sebuah hamparan di atas halaman yang akan terbuka atau muncul saat gambar di klik. Gunanya untuk menampilkan gambar dengan ukuran yang lebih besar ketimbang yang ditampilkan di halaman, sehingga orang dapat melihat gambar tersebut lebih jelas. Tutorial ini sebenarnya terinspirasi dari masalah Mang Tekno sendiri, karena Mang Tekno menonaktifkan JavaScript Widget Blogger menyebabkan script untuk Lightbox bawaan Blogger juga ikut tidak aktif.

Lightbox mungkin bukanlah hal yang esensial bagi sejumlah Blogger, namun tak boleh diabaikan karena selain berguna untuk pengunjung saat kita menampilkan gambar dengan ukuran yang kecil. Juga dapat membantu mengurangi angka bounce rate akibat pengunjung mengklik gambar di blog kita, tanpa adanya Lightbox maka saat gambar di klik akan mengarahkan pengunjung ke link sumber gambar tersebut yang artinya dianggap meninggalkan halaman blog kita. Ketika seorang pengunjung meninggalkan blog kita, angka bounce rate akan melambung dan jika terlalu tinggi imbasnya tidak baik terhadap nilai SEO. Google menganggap konten blog tidak berkualitas jika bounce ratenya tinggi.

Atau jika sobat hanya tertarik ingin mengganti Lightbox bawaan Blogger dengan yang ini maka sobat dapat mengikuti langkah-langkah di bawah, karena menurut Mang Tekno pribadi juga Custom Lightbox ini jauh lebih keren dan juga lebih ringan sehingga tidak membebani loading blog.

Cara Pasang

1. Pertama-tama nonaktifkan fitur Lightbox bawaan Blogger terlebih dahulu melalui menu "Setelan > Pos dan komentar", lalu ubah opsi Lightbox menjadi "Tidak" seperti gambar di bawah ini:

2. Setelah itu buka Dashboard Blogger sobat masing-masing kemudian klik menu "Template > Edit HTML".

3. Copy dan letakkan kode CSS berikut di atas 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;
}

4. Tekan "Ctrl + F" lalu cari kode </head> dan letakkan script berikut tepat di atasnya:

<script src='https://mt-blog.googlecode.com/svn/trunk/js/custom-lightbox.js' type='text/javascript'/>

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

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

4. Simpan template dan sekarang coba buka salah satu artikel di blog sobat lalu klik gambarnya.


Sumber: http://mangtekno.blogspot.com/