Memasang LightBox JQuery di Blogger

Tutorial berikut ini akan membahas tentang cara membuat LightBox JQuery. LightBox secara sederhana adalah menampilkan gambar dalam halaman posting dengan cepat dan mudah tanpa mengarahkan pengunjung ke link sumber gambar tersebut. LightBox juga berguna untuk membantu mengurangi Bounce Rate akibat pengunjung mengklik gambar di Blog kita. Ketika seorang pengunjung meninggalkan Blog kita, angka Bounce Rate akan melambung tinggi dan tidak baik terhadap nilai SEO sehingga Google menganggap konten Blog tidak berkualitas dan mengurangi jumlah pengunjung. Selain meningkatkan SEO, LightBox juga dapat meningkatkan Responsive pada Blog. Disini saya akan memberikan 2 Style LightBox dan pilih sesuai dengan keinginan Anda.

Cara Membuat LightBox JQuery

1. Login Blogger.
2. Pilih Template, Edit HTML.
3. Pilih Style LightBox keinginan Anda.

• Style 1

 1) Copy code di bawah ini dan letakkan code di bawah ini di atas code </head>.

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script><br /> <script src="https://googledrive.com/host/0B18vnuOcx7BQYi1UVDd6ZDBnS3M/LightBox.OBT.js" type="text/javascript"></script>

• Style 2

 1) Tekan Ctrl+F (untuk mempermudah proses pencarian), lalu letakkan CSS berikut di atas ]]></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,#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} 

 2) Kemudian letakkan code berikut di atas </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'/> 

4. Save Template.

Share This :