Tạo hiệu ứng viền và chú thích cho ảnh

Thay vì chỉ upload ảnh thông thường không hiệu ứng khi viết Blog, tại sao bạn không trang trí thêm cho chúng để tạo vẻ sinh động! Một vài dòng lệnh CSS dưới đây sẽ khiến ảnh của bạn trở nên độc đáo.

1. Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
2. Tìm thẻ ]]></b:skin> và dán đoạn code này ngay trên nó :
   
   .pict{
       background-color: #F9F9F9;
       border: 1px solid #CCCCCC;
       padding: 3px;
       font: 11px Arial;
       margin-left: auto;
       margin-right: auto;
       }
   .pict img{
       border: 1px solid #CCCCCC;
       vertical-align:middle;
       margin-bottom: 3px;
       }
3. Save lại template. Vậy là bạn đã thiết lập được hiệu ứng này.
4. Để sử dụng hiệu ứng viền có kèm chú thích, bạn áp dụng cú pháp sau lên link ảnh:
   
   <div class="pict" style="width:Chiều rộng ảnh gốc + 2px;"><img src="Link ảnh"/>Chú thích</div>

Để dễ hình dung hơn, mình sẽ đưa ra một cú pháp thử kèm theo demo :

<div class="pict" style="width:252px;"><img src="http://i259.photobucket.com/albums/hh283/boy_proDX/Banner_Summer_2009.png"/><div style="text-align: center;">Blog Tin Học</div></div>

Blog Tin Học

Vậy là xong rồi đấy, rất đơn giản đúng không. Nếu bạn có thắc mắc thêm về việc tùy chỉnh, hãy comment bên dưới. Hy vọng với tí đoạn CSS này sẽ giúp bạn làm đẹp thêm cho Blog của mình. Chúc vui!