jQuery Gambar Efek Lightbox Pada Blog

jQuery Gambar Efek Lightbox Pada Blog – jika anda sedang membuka akun Google+ lalu saat melihat album foto dan anda klik pada salah satu foto/gambar tersebut maka pada gambar yang setelah anda klik akan membesar dan di sekeliling foto/gambar akan tampak hitam, efek seperti itulah yang saya maksud dengan gambar efek lightbox pada trik blogger kali ini.
Untuk membuat efek gambar lightbox ini tidak membutuhkan waktu lama dan sangat mudah seperti halnya jika anda sudah pernah memasang jQuery Gambar Efek Zoom ataupun jQuery Gambar Efek Kubus Berputar. Pemasangan efek gambar ini hanya cukup dengan menambahkan sedikit kode pada template blog maka gambar efek lightbox ini pada blog anda siap terpakai. Untuk melihat lebih jelasnya secara langsung silahkan klik tombol demo dibawah dan berikut adalah trik blogger untuk cara membuat jQuery Gambar Efek Lightbox Pada Blog:

View Demo

1. Login ke blogger.
2. Kemudian klik Template > Edit HTML.
3. Selanjutnya cari kode ]]></b:skin> gunakan CTRL+F untuk mempermudah pencarian.
4. Setelah ketemu, copy kode berikut ini kemudian letakan tepat di atas atau sebelum kode ]]></b:skin>

#jquery-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
}
#jquery-lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#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: 0;
float: left;
}
#lightbox-nav-btnNext {
right: 0;
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;
width: 100%;
padding: 0 10px 0;
}
#lightbox-container-image-data {
padding: 0 10px;
color: #666;
}
#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;
}

5. Tahap selanjutnya cari kode </head> lalu copy kode dibawah ini kemudian letakan diatasnya.

<!--http://mas-andes.blogspot.com lightbox-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script src='http://faceblog-evolutions.googlecode.com/files/lightboxs.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(&#39;a.spicebox&#39;) .lightBox({

overlayOpacity: 0.6,
imageLoading: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj1bsbyODuCq-vFSWxApXi8pyeLDbz2Qp1h3t2QcshgXvuQGCK663zW2UsJWBY4pzTDc-Bs-A83_0YnEa_7bW8IH8rh0haAjEoPEu5EwyEL3UOY22erACOdzKJ9aEoBOIUAP33OARw93Te/s1600/lightbox-ico-loading.gif&#39;,
imageBtnClose: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCi6MboQvdMcVqXUrKtV5XK-aMEL0p9YfWtQNnKCYjcDiJqb9DMHggZcohasZFUoMhDyaLJVprBLkD6jd1S5IXJIG6Nt2P6eul1LPDSx420mMeLjq5ajfhHjGL7IMgQbFm4uk1bkrJpdoz/s1600/lightbox-btn-close.gif&#39;,
imageBtnPrev: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6roVNZSV7Y2xPpK1ta_MDISZjFmvmwPlUnkDfzpHnwAX3J-wAWlt2avSecBA38YHBBZIZbpCDDHGY7oEHwCZWq16m1QdQv_-6SqX212gQ3OCLDdrlA82rTnmeWxsdfAKl3ZL3J2vrCdy5/s1600/lightbox-btn-prev.gif&#39;,
imageBtnNext: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO72xapiTaF6DVMI2OvJTlYxf_jnq36UiH3qFrDMOhnfdgBaOHU-t51snvebwnDsq0VgpglxXFrai8k1p5tLmMXFK3shlze2uGpH65wrQTL7FzgXrjAT0nD4Uc8tWpHPyoiELn7Ybu6pa4/s1600/lightbox-btn-next.gif&#39;,
containerResizeSpeed: 350,
txtImage: &#39;Image&#39;,
txtOf: &#39;Of&#39;
});
});
</script>
<!--end lightbox scripts-->

6. Simpan Template.

Selanjutnya untuk menampilkan efek lightbox pada gambar tersebut saat memposting artikel caranya sebagai berikut:

<div class="separator" style="clear: both; text-align: center;">
<a class="spicebox" title="Deskripsi Gambar" href="URL Gambar 1" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="URL Gambar 1" width="320" /></a></div>

Keterangan:

Pada tulisan yang berwarna merah silahkan ganti dengan deskripsi dari gambar anda dan yang berwarna biru silahkan anda ganti dengan URL gambar milik anda, sebagai contoh seperti dibawah ini:

<div class="separator" style="clear: both; text-align: center;">
<a class="spicebox" title="jQuery Gambar Efek Lightbox Pada Blog" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMoYCIK8lO-U_TZEV97hWkIaakHyF-6KE6EMJnzHCI58IlZUEPEtEHAPBkwIX4rXQE7zKZCZhdWJZ00rJQWoI9tkHjlJhDqV3CI0vT7nasoB2nuaFRNq3-urBcsnJGkV0jJzUHPcM_R-c/s320/elisha_cuthbert_face_wallpaper-2013-05.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMoYCIK8lO-U_TZEV97hWkIaakHyF-6KE6EMJnzHCI58IlZUEPEtEHAPBkwIX4rXQE7zKZCZhdWJZ00rJQWoI9tkHjlJhDqV3CI0vT7nasoB2nuaFRNq3-urBcsnJGkV0jJzUHPcM_R-c/s320/elisha_cuthbert_face_wallpaper-2013-05.jpg" width="320" /></a></div>