Tạo ghi chú cho hình ảnh trong bài viết (updated)

Trong một số bài viết, việc chú thích cho hình ảnh là khá quan trọng, đặc biệt là các bức ảnh do bạn chụp. Việc làm đó giúp bức ảnh và cả bài viết trở nên sinh động hơn. Có rất nhiều cách tạo chú thích (caption) khác nhau cho hình ảnh trên blog. Dưới đây xin giới thiệu với bạn một cách rất đơn giản và dễ thực hiện.


Trước hết bạn hãy xem minh họa dưới đây cho image caption. Mình đã update phần tạo bo viền góc cho image caption nhưng nó không có tác dụng khi bạn duyệt web bằng IE.

Hang them in the sky to dry! - Photo credit

Bây giờ hãy bắt tay vào tạo image caption. Bạn thêm đoạn code sau vào trước </head>.

<style type='text/css'>
.caption {
       border: 1px solid #DDDDDD;
       text-align: center;
       background-color: #EEEEEE;
       padding: 4px 4px 3px 4px;
       margin-right:auto;
       margin-left:auto;
       -moz-border-radius: 3px;
       -khtml-border-radius: 3px;
       border-radius: 3px;
}

.caption img {
       margin: 0px 0px 2px 0px;
       padding: 0px;
       border-top: 1px solid #ddd;
       border-left: 1px solid #ddd;
       border-bottom: 1px solid #c0c0c0;
       border-right: 1px solid #c0c0c0;                 
}

.caption p.caption-text {
       padding: 0px;
       font-family: Arial, Sans-Serif;
       font-size: 11px;
       font-weight: normal;
       line-height: 12px;
}
</style>

Màu sắc, font chữ, cỡ chữ và canh lề ở trên đã tùy chỉnh theo template của Minh Hai Blog. Các bạn có thể chỉnh sửa cho phù hợp với blog của mình.
Vậy là xong phần CSS code. Bây giờ khi tạo bài viết mới nếu muốn tạo ghi chú cho image bạn thêm đoạn code sau trong bài viết.
<div class="caption" style="width: 560px;">
<img src="image url" alt=""/><p class="caption-text">Đây là nội dung phần ghi chú cho hình ảnh</p></div>
Lưu ý: Chiều rộng (style="width: 560px;") của caption bạn nên đặt lớn hơn chiều rộng của image khoảng 6px thì sẽ được kết quả như minh họa ở trên.

Tham khảo thêm một số image caption ở các trang web khác tại đây.

Update: Bạn có thể tạo caption cho video tương tự như với image nếu cách thay đoạn code

<img src="image url" alt=""/>

bằng đoạn code video cần nhúng.

Kết quả:

Intel - From Sand to Silicon: the Making of a Chip