Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

jQuery Gambar Efek Lightbox Pada Blog

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:


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;http://1.bp.blogspot.com/-E4eaouKn-VA/TdvW6y3ZZxI/AAAAAAAAEEM/6UHhujshJsg/s1600/lightbox-ico-loading.gif&#39;,
imageBtnClose: &#39;http://2.bp.blogspot.com/-akpfLVo73Zk/TdvW4dmQALI/AAAAAAAAEEA/jn9ZWXFrYcI/s1600/lightbox-btn-close.gif&#39;,
imageBtnPrev: &#39;http://3.bp.blogspot.com/-rWUtFwoKp3M/TdvW6VzTTpI/AAAAAAAAEEI/7afUa6r4H9Q/s1600/lightbox-btn-prev.gif&#39;,
imageBtnNext: &#39;http://3.bp.blogspot.com/-LFX48wGyrqc/TdvW6Md87dI/AAAAAAAAEEE/1gec9BHuVuc/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="http://4.bp.blogspot.com/-YykU3H4DtXg/USckPtBBkII/AAAAAAAAC4Q/P6vexx_xMzM/s320/elisha_cuthbert_face_wallpaper-2013-05.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://4.bp.blogspot.com/-YykU3H4DtXg/USckPtBBkII/AAAAAAAAC4Q/P6vexx_xMzM/s320/elisha_cuthbert_face_wallpaper-2013-05.jpg" width="320" /></a></div>

Berlangganan artikel via email

8 Response to "jQuery Gambar Efek Lightbox Pada Blog"

Happy Sunday night to you. Wish you a beautiful dreams and joyful week. LG fotis from Greece. http://fotisbazakas.blogspot.gr

Balas

Lumayan nih tutorial nya sob! Tapi kalau mau dipakai, harus selalu menyertakan script khusus supaya efek nya aktif di postingan ya! :)

Balas

thanks for visiting my friends..

Balas

iyak betulll sekali sob :)
buruan sob, limited edition... hehe

Balas

Kren Boz, kunjungi juga t4 ane ya, dan bergabung dengan ane, sapapun itu yang mau bergabung atau mengunjui kami, dan kami pun akan melakukan timbal balik, dan jangan lupa like :)

Balas

makasih infonya bray,,

Balas
avatar
Anonymous

Kalau secara langsung tanpa meletakkan script lagi pada saat posting gimana mas?

Balas

terima kasih atas infonya ini berguna untuk saya yang sedang mencari info jquery efek light box ahkirnya ketemu disini

salam kenal http://whussaya.blogspot.co.id/

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "jQuery Gambar Efek Lightbox Pada Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode