Tạo chú thích cho ảnh trong bài viết blogspot

Bạn có dịp tham quan những danh lam thắng cảnh trên thế giới và đã chụp lại rất nhiều ảnh đẹp. Bạn muốn chia sẻ những tấm ảnh đó với bạn của mình trên blog. Nhưng không phải ai cũng biết địa danh hay tên gọi của những nơi đó nên khi post ảnh lên bạn phải tạo chú thích cho ảnh.

Bây giờ bạn thử ngắm 2 hình ở trang DEMO này. Lưu ý: không thấy hiệu ứng khi xem ở IE.

Bạn thích kiểu ghi chú của hình 1 hay hình 2, nếu thích hình 1 thì bạn làm theo cách bình thường, upload ảnh lên xong thì viết ghi chú bên dưới nó. Nhưng nếu bạn thích kiểu ghi chú ở hình 2 thì sao?

Thủ thuật đơn giản sau sẽ giúp bạn có kiểu ghi chú ấn tượng này.

Các bạn đặt code này vào trướcdòng ]]></b:skin>.

.imgcaption {
padding-bottom:10px;
padding-top:30px;
position:relative;
}
.imgcaption cap {
position:absolute;
left:0%;
right:0%;
padding:10px;
background:#dddddd;
color:ffffff;
opacity:0.8 !important;
bottom:6%;
}

Xong rồi bạn lưu template lại.

Trong bài đăng, khi bạn upload ảnh thì ảnh thường có dạng như thế này:

<div class="separator" style="clear: both; text-align: center;"
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQOy4BE8nzwIWg8MLAirqUhhKmaWL5jmiyY0nGR5zf2SQczANUL8DhNMLLrrG6EmkOnkLBgPFxE6L1a8wSqgtVAnIId5iijkAJIacP2zo1IRs-SadxtxINg1k-fidAIcqhsQ9IeB6SQAuf/s1600/Nha+hat+Opera.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQOy4BE8nzwIWg8MLAirqUhhKmaWL5jmiyY0nGR5zf2SQczANUL8DhNMLLrrG6EmkOnkLBgPFxE6L1a8wSqgtVAnIId5iijkAJIacP2zo1IRs-SadxtxINg1k-fidAIcqhsQ9IeB6SQAuf/s1600/Nha+hat+Opera.jpg" /></a></div>

Bây giờ bạn chỉ cần nhìn vào code bên dưới, lưu ý "seperator" đã được thay bằng "imgcaption" và trước thẻ </div> chúng ta thêm vào dòng code màu đỏ là OK.

<div class="imgcaption" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQOy4BE8nzwIWg8MLAirqUhhKmaWL5jmiyY0nGR5zf2SQczANUL8DhNMLLrrG6EmkOnkLBgPFxE6L1a8wSqgtVAnIId5iijkAJIacP2zo1IRs-SadxtxINg1k-fidAIcqhsQ9IeB6SQAuf/s1600/Nha+hat+Opera.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQOy4BE8nzwIWg8MLAirqUhhKmaWL5jmiyY0nGR5zf2SQczANUL8DhNMLLrrG6EmkOnkLBgPFxE6L1a8wSqgtVAnIId5iijkAJIacP2zo1IRs-SadxtxINg1k-fidAIcqhsQ9IeB6SQAuf/s1600/Nha+hat+Opera.jpg" /></a><cap>Nhà hát Opera Sydney</cap></div>

Chúc các bạn thành công.