Hiệu ứng lightbox cho hình ảnh

 - Hôm nay mình xin chia sẽ cho các bạn một thủ thuật khá hay để làm hiệu ứng cho hình ảnh trên blog của bạn. Đó là sử dụng hiệu ứng "Lightbox" cho ảnh, hiệu ứng này sẽ làm cho blog bạn bị che lại khi hiển thị hình ảnh có sử dụng lightbox này. Để có thể biết rỏ hơn về thủ thuật này bạn hãy tham khkaor cách thực hiện bên dưới.

Live demo:
 
☼ Cách thực hiện

1. Đăng nhập vào blogger
2. Vào bố cục và chọn chỉnh sửa HTML
3. Chèn đoạn code bên dưới vào sau thẻ 

#lightbox{
background:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 0px; right: 0px; }

#lightbox img{ border: none; clear: both;}
#overlay img{ border: none; }

#overlay{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvvqZ2LsFfRJnvsb24ixlAOmXaasiVnPe7DYMEZ6d5vweCL10ZGxvgjM_Nd5BJUPt6Ki_4zzqFGTz35wsYkxywqcAropcGicVkyucFGq4TQkBFpGK6le9a8YKxwn0EPUzIg-6GS6xLddYQ/); }

* html #overlay{
background: #333;
background: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}

4. Save template lại
5. Bây giờ để có thể sử dụng được hiệu ứng này bạn phải thực hiện thêm một bước nữa, đó là khi sử dụng hình ảnh trên blog của bạn thì phải dùng lệnh tương tự như bên dưới.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-KwvpMCzAYss5TUKq6jwJdJTY5WIlHU0MTIvfw5HgKnaLkvLs-JcY2Nm2evG2XJv3Kd3J-FbwSmDNHXegQGieXJAjnYm_75mxCucvJeQYJHu-l_VfrDg-zTxrM13fIBTUWuBdasML5LB_/s640/3.jpg" rel="lightbox" >width="200" height="250"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-KwvpMCzAYss5TUKq6jwJdJTY5WIlHU0MTIvfw5HgKnaLkvLs-JcY2Nm2evG2XJv3Kd3J-FbwSmDNHXegQGieXJAjnYm_75mxCucvJeQYJHu-l_VfrDg-zTxrM13fIBTUWuBdasML5LB_/s640/3.jpg" />

-Code màu đỏ là link ảnh thực của bạn, tức là nó sẽ hiển thị chiều cao và độ rộng lớn nhất của hình ảnh đó.
- Code màu xanh chính là link hình ảnh đó mà bạn đã thu nhỏ lại với độ rộng và chiều cao tùy ý.
Lưu ý: 2 đường link trên là giống nhau.
Chúc bạn thành công

Tham khảo từ dynamicdrive.com