• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

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

6
01/08/2011

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="http://2.bp.blogspot.com/-zG6CA5Uu8hQ/TjahlyPCa7I/AAAAAAAAALE/kMf_Le2CWOY/s1600/Nha%2Bhat%2BOpera.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" src="http://2.bp.blogspot.com/-zG6CA5Uu8hQ/TjahlyPCa7I/AAAAAAAAALE/kMf_Le2CWOY/s1600/Nha%2Bhat%2BOpera.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="http://2.bp.blogspot.com/-zG6CA5Uu8hQ/TjahlyPCa7I/AAAAAAAAALE/kMf_Le2CWOY/s1600/Nha%2Bhat%2BOpera.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" src="http://2.bp.blogspot.com/-zG6CA5Uu8hQ/TjahlyPCa7I/AAAAAAAAALE/kMf_Le2CWOY/s1600/Nha%2Bhat%2BOpera.jpg" /></a><cap>Nhà hát Opera Sydney</cap></div>

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

{6 bình luậnAdd yours ?}

08:02:00, 2 thg 8, 2011

Mình khoái những thủ thuật ko đụng tới js mà Mr Hà đăng

Reply
08:04:00, 2 thg 8, 2011

Cảm ơn Vietutd. Mình vẫn luôn cố gắng phi js hóa để giúp load trang nhẹ hơn.

Reply
10:20:00, 2 thg 8, 2011

Tại sao Blogger hỗ trợ chức năng add caption mà không xài?

Reply
10:39:00, 2 thg 8, 2011

Nói về caption thì còn phức tạp hơn nhiều (left, right), cơ bản ở đây Peace muốn chia sẻ thêm 1 kiến thức sơ đẳng ấy mà.

Reply
11:55:00, 2 thg 8, 2011

@Tien Nguyen Dùng caption có sẵn cũng được nhưng mình thấy nó không mượt mà bằng thủ thuật này đó Tiến. :51)

Reply
18:45:00, 2 thg 8, 2011

dùng chú thích có sẵn của Blogspot vẫn gọn gàng dễ nhìn nhất,

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn