Scroll
Friday, August 14, 2015
Lightbox Blogger dengan Jquery
Sejak berubahnya system edit HTML /perubahan tampilan blogger,banyak
sekali template" yang diantaranya yaitu template saya yang ternyata
Fitur Lightbox dari blogger tidak berfungsi.Dan sampai sekarang masih
sangat sulit untuk memperbaikinya,oleh karena itu yang dapat dilakukan
adalah menggunakan Lightbox aternatif yaang cukup sederhana dan
ringan,sehingga ketika kita klik gambar pada posting,secara otomatis
akan mebuka gambar dengan ukuran normal tanpa berpindah tab baru.Trik
ini sebenarnya sudah lama saya temukan di google ,tetapi lupa
sumbernya~xDDDDD
Contoh
Gomenasai gomenasai gomenasai @_____@",yahh,karena saya rasa banyak yang membutuhkanya,mungkin akan sangat berguna bagi yang ingin menggunakan fitur lightbox ini.
Sebelum menggunakan trik ini,saya ingatkan untuk selalu membackup template anda agar bila terjadi suatu masalah,dapat dikembalikan seperti semula,tetapi tidak ada masalah juga sih,kerena sudah saya terapkan di blog Oreimo,hayaraku maou-sama dan Titan~xD
Pertama,Buka blogger=>edit HTML lalu copy-paste CSS dibawah ini tepat diatas kode ]]></b:skin>
CSS
#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,#jquery-lightbox a:hover
{border:none}
#jquery-lightbox a img{border:none}
#lightbox-container-image-box
{position:relative;background-color:#fff;border-radius: 5px 5px 0px 0px;
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;border-radius: 0px 0px 5px 5px;}
#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}
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,#jquery-lightbox a:hover
{border:none}
#jquery-lightbox a img{border:none}
#lightbox-container-image-box
{position:relative;background-color:#fff;border-radius: 5px 5px 0px 0px;
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;border-radius: 0px 0px 5px 5px;}
#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}
Setelah itu letakan Jquery diatas ini tepat diatas kode </body>
Jquery
<script src='http://lightbox-blogger.googlecode.com/files/jquery.min.js' type='text/javascript'/>
<script src='http://lightbox-blogger.googlecode.com/files/lightbox.min.js' type='text/javascript'/>
<script src='http://lightbox-blogger.googlecode.com/files/lightbox.min.js' type='text/javascript'/>
Setelah itu Simpan dan Lihat hasilnya dengan klik gambar pada postingan anda.
Semoga bermanfaat,Arigatou Gozaimasu~
Semoga bermanfaat,Arigatou Gozaimasu~
