Là một Blogger thì 100% một điều là chúng ta phải đăng rất nhiều hình ảnh vào bài viết của chúng ta khi đăng bài. Do đó Google đã thêm sẵn lightbox vào Blogger giúp khách đến thăm có thể dễ dàng duyệt hình ảnh của chúng ta một cách dễ dàng hơn, và hôm nay tại bài viết này mình muốn chia sẻ thêm cho các bạn một lightbox mà mình tìm được trên mạng, trông khá đơn giản vào đẹp.
Hướng dẫn thiết lập và sử dụng Lightbox
Đầu tiên bạn vào Blogger >> Mẫu >> Chỉnh sửa HTML thêm đoạn CSS vào trước thẻ ]]></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}
Tiếp đến chèn đoạn mã sau vào trên thẻ </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'/>Như vậy là hoàn tất thêm lightbox vào Blogger của bạn. Chúc bạn có một website ngày càng đẹp hơn!
"nguồn bài viết từ KslZone.NET".
0 nhận xét:
Đăng nhận xét