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

Thursday, August 13, 2009
Image caption
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.

Image caption

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

Bạn có thể cập nhật bài viết mới từ Blogger+ một cách nhanh nhất bằng cách:

Đăng ký nhận tin RSS;

Đăng ký nhận bài viết mới qua Email.


Copyright 2008 - 2011 - BloggerPlus.net. All rights reserved.
Ghi rõ nguồn khi phát hành lại thông tin từ trang này.
Design by Pavel. Powered by Blogger
Based on CSS by Ourblogtemplates