Phóng to ảnh cho Blogger bằng Lightbox effect

Hiệu ứng Lightbox giúp bạn có thể xem ảnh một cách dễ dàng trên blogger. Trang web cũng load nhanh hơn nếu như có nhiều hình ảnh. Khi xem một bức ảnh gốc sẽ không bị chuyển sang trang khác.
Để tạo hiệu ứng này phải sử dụng jQuery Lightbox plugin

HƯỚNG DẪN
- Đăng nhập Blogger, vào phần chỉnh sửa Templates
- Tìm trong templates ]]></b:skin> và chèn vào trước nó đoạn code sau

/* LightBox by azmobi.net */
#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;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}

- Chèn đoạn mã sau đây vào trước </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="https://dl.dropboxusercontent.com/s/6h56pf8v1jvsoij/lightbox.min.js" type="text/javascript"></script>

- Vậy là xong.

CÁCH SỬ DỤNG.
- Để có hiệu ứng Lightbox Effect thì bạn nên tạo bài viết có hình theo code mẫu sau

<a href="link file ảnh gốc"><img src="link file hình thu nhỏ thumbnail" /></a>

LƯU Ý
- Để Lightbox Effect hoạt động bạn phải vào: Cài đặt >> Bài đăng và nhận xét >> Hiển thị hình ảnh với hiệu ứng Hộp đèn >> Chọn Không (NO)

Bạn vừa xem chuyên mục Webmasters bài viết Phóng to ảnh cho Blogger bằng Lightbox effect. Bạn có thể lưu lại URL https://azmobi1.blogspot.com/2013/08/phong-to-anh-cho-blogger-bang-lightbox.html. Cảm ơn!

Chuyên Mục: Webmasters - 12/8/13