Car Reviews

Auto Show

Sự kiệnThông tinChi tiết
Vietnam Motor Show 20165/10 đến 9/10 tại I.C.E, 91 Trần Hưng Đạo, Hà Nội Tham gia
Vietnam International Motor Show 201626/10 đến 30/10 tại SECC, 799 Nguyễn Văn Linh, Sài Gòn Tham gia

Saturday, October 15, 2011

Tạo ghi chú cho hình ảnh và Video 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., Tạo ghi chú cho hình ảnh và Video trong bài viết (updated)

Chia sẻ:
Tạo ghi chú cho hình ảnh và Video 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. Các bạn có thể xem hình bên dưới.
Ảnh hoạt hình Anime (240x320) làm nền điện thoại.
Ảnh hoạt hình aminne
- 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 namkna. 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 bằng cách thay đoạn code sau:
<div class="caption" style="width: 560px;">
<iframe width="420" height="315" src="http://www.youtube.com/embed/Qv08y8zCJ4E?rel=0" frameborder="0" allowfullscreen></iframe><p class="caption-text">Đây là nội dung phần ghi chú cho hình ảnh</p></div>
- Thay phần màu xanh bằng code video cần nhúng bằng đoạn code video cần nhúng.

Quà tặng cuộc sông - Thiên sứ và ác quỷ
Bi giờ trang của bạn đã thật sự giống một trang phim :)
Chúc thành công!

0 nhận xét:

Post a Comment