Lightbox mới thay thế mặc định cho Blogger

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.

Lightbox mới thay thế mặc định cho Blogger

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!

6 bình luận

  1. avatar says

    lúc 19:00 22 tháng 3, 2014

    Cái dụ làm cho nút Next với Prev hiện thì mình chịu thôi, phải chỉnh sửa trong file js, mà mình chưa rành jQuery với Javascript cho lắm :D

  2. avatar says

    lúc 16:25 12 tháng 6, 2014

    bạn ơi nếu muốn bỏ lightbox mặc định thì làm sao vậy vì khi mình thêm thủ thuật của bạn vào nó bị trùng 2 cái( 1 của bạn, 1 của mặc định), bạn click vào hình xem nhé XEM THỬ

  3. avatar says

    lúc 20:05 12 tháng 6, 2014

    Mình đã có bài viết hướng dẫn qua rồi, bạn xem qua nhé!

    http://www.kslzone.net/2014/02/tat-lightbox-mac-inh-cua-blogger.html

  4. avatar says

    lúc 14:12 17 tháng 6, 2014

    nó xung đột code bạn ơi, nó làm một số thành phần khác không hoạt động như là slider :)

  5. avatar says

    lúc 14:49 17 tháng 6, 2014

    Vấn đề xung đột thì mình chịu thôi. Có thể là trùng tên hàm trùng biến,... .Để sửa thì khó quá, tại vì lightbox này do pro trên mạng nào đó chứ không phải mình viết ra :)

  6. avatar Nặc danh says

    lúc 10:23 13 tháng 2, 2015

    Bạn xóa file <script src='http://lightbox-blogger.googlecode.com/files/jquery.min.js' type='text/javascript'/> đi là được.

    http://bacsiwindows.blogspot.com/2015/02/cach-tai-nhac-vip-tu-zing-mp3-khong-can-zing-vip.html

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.