Cara Membuat Lightbox dengan Jquery di Blog

Selamat sore sobat Blog Krizeer, sekarang "Smart Education" sudah ganti judul blog :D, pada kali ini Blog Krizeer mau berbagi "Cara Membuat Lightbox dengan Jquery di Blog". Lightbox itu lho ketika gambar di klik di dalam postingan akan muncul gambar dengan ukuran originalnya di artikel tersebut, dan tidak usah menuju ke link gambarnya terlebih dahulu. Mungkin banyak yang sudah mengetahui tutorial saya kali ini, dan ada juga yang belumtau sama-sekali, Sebetulnya tutorial ini sudah dijelaskan oleh Blog Johanes, saya akan share lagi. Berikut screen shootnya, sobat bisa lihat sendiri gambar dibawah ini sebagai contohnya:

Sudah tau kan maksud saya ?, yaudah kalo sudah tau, simaklah tutorial berikut:

1. Buka Blogger -> edit HTML
2. Cari kode ]]></b:skin> dengan menekan tombol CTRL + F (supaya mempercepat proses pencarian, dari pada di liatin kodenya satu-satu, entar lebaran duluan deh :D)
3. Copy paste kode dibawah ini tepat di atas kode ]]></b:skin>

/* Lightbox by www.yoga-tc.blogspot.com */
#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}
/* End Lightbox by www.yoga-tc.blogspot.com */

Setelah itu letakan Jquery dibawah ini tepat diatas kode </body>

<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'/>

Setelah itu simpan template dan lihat hasilnya dengan klik gambar pada postingan anda. Semoga bermanfaat :D
Source dari : http://djogzs.blogspot.com/2013/07/lightbox-blogger-dengan-jquery.html

Tweet

Unknown pada 7/23/2013