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

+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.
+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: 0px;
       -moz-border-radius: 3px;
       -khtml-border-radius: 3px;
       -webkit-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. 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à mội dung 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
Update: Bạn có thể tạo caption cho video tương tự như với image nếu thay đoạn code

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

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