Hướng Dẫn Tạo Hiệu Ứng LightBox Cho Hình Ảnh Trên Blogger

Lightbox là một trong những hiệu ứng khá phổ biến trên wordpress và có nhiều thể loại và cách hiển thị khác nhau tùy vào sở thích của mỗi cá nhân. Các blogger sử dụng wordpress chẳng khó gì khi chọn một plugin mà mình yêu thích để tạo một album ảnh. Tuy nhiên, với blogger thì quả thật là một quá trình khó khăn.

Trước đây, blogviet đã tìm tòi nhưng không tìm được một hướng dẫn nào phù hợp để sử dụng tính năng này trên một blog tại blogger. Vô tình lướt qua các gadgets có sẵn trong blogger dashboard và thấy có vài tác giả, một trong số đó là Blogger Plugins - người đã có thủ thuật giúp các blogger có thể dễ dàng vận dụng hiệu ứng Lightbox cho các hình ảnh trên blogspot một cách đơn giản như trên wordpress.

Để triển khai được thủ thuật này, bạn đăng nhập vào blogger, tìm đến chỗ Edit HTML, chọn Expand full templates rồi dán đoạn code sau vào trước thẻ </head>

<!--Light Box Code Starts Bloggerplugins.ORG-->
<style>
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer&gt;#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAjclAxE6Hy69AH43G9I9eSdSqhIn8M-TqqX40ARbb58QQ8JFKEKZD6qrl0LR8d3YmBnWt7JY6S2bTABjM0ncs7wXdFfbtXa1RuZ7nVsHbJb0kAvEhYRig6_Zy25htnMX6azt2cF0XVOo/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWd3P0w1Bh6jroAVFJqF2PPMxIKLlw3kt99p49s-N7EVmkKFx97KUzlP9jg6WlcWSxSiEDdjodl-HizQWR3l5k8ya_6jSXb8H1EEjDqBsKSTGaACYKj2LZF7yZAlwC7yO-zdSappgL0vs/) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/>
<script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/>
<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>
<!--Light Box Code Ends Bloggerplugins.ORG-->

Sau đó Save changes là xong phần chèn code. Bước tiếp theo là làm việc với các hình ảnh khi bạn upload lên.

Sau khi đã upload hình ảnh, bạn làm như hướng dẫn trong hình sau:



Đối với hình ảnh riêng lẻ thì chúng ta sử dụng thẻ sau:

rel="lightbox" title="ten_hinh_anh"

Còn đối với các album nhiều hơn 1 hình ảnh thì chúng ta sử dụng thẻ sau:

rel="lightbox[ten_album]" title="ten_hinh_anh"

Sau khi đã làm xong, bạn chỉ việc đăng bài và kiểm chứng. Mình đã test thử và thành công ngay trên bài này cho hình ảnh riêng lẻ. Nếu muốn xem hình ảnh trên album thì các bạn xem bài này nhé.

Chúc các bạn thành công nhé.

DEMO luôn hình ảnh album em Mai Phương Thúy để các bạn rõ hơn về hiệu ứng này nhé:


Theo Blogger Plugins Blog