Tạo hiệu ứng viền và chú thích cho ảnh


Thay vì chỉ upload ảnh thông thường không hiệu ứng khi viết Blog, tại sao bạn không trang trí thêm cho chúng để tạo vẻ sinh động! Một vài dòng lệnh CSS dưới đây sẽ khiến ảnh của bạn trở nên độc đáo.
  1. Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích).
  2. Tìm thẻ ]]></b:skin> và dán đoạn code này ngay trên nó :
    .pict{
        background-color: #F9F9F9;
        border: 1px solid #CCCCCC;
        padding: 3px;
        font: 11px Arial;
        margin-left: auto;
        margin-right: auto;
        }
    .pict img{
        border: 1px solid #CCCCCC;
        vertical-align:middle;
        margin-bottom: 3px;
        }
  3. Save lại template. Vậy là bạn đã thiết lập được hiệu ứng này.
  4. Để sử dụng hiệu ứng viền có kèm chú thích, bạn áp dụng cú pháp sau lên link ảnh:
    <div class="pict" style="width:Chiều rộng ảnh gốc + 2px;"><img src="Link ảnh"/>Chú thích</div>
Để dễ hình dung hơn, mình sẽ đưa ra một cú pháp thử kèm theo demo :
<div class="pict" style="width:252px;"><img src="http://i259.photobucket.com/albums/hh283/boy_proDX/Banner_Summer_2009.png"/><div style="text-align: center;">Blog Tin Học</div></div>

Blog Tin Học

Vậy là xong rồi đấy, rất đơn giản đúng không. Nếu bạn có thắc mắc thêm về việc tùy chỉnh, hãy comment bên dưới. Hy vọng với tí đoạn CSS này sẽ giúp bạn làm đẹp thêm cho Blog của mình. Chúc vui!

2 Nhận xét on "Tạo hiệu ứng viền và chú thích cho ảnh"

tinhrock on 17 August 2009 at 08:30 said...

cái này cũng rất hay đấy :) viết nhiều tiện ích nữa nhé :X

boyproDX on 17 August 2009 at 09:33 said...

Ok men :D

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Cám ơn bạn đã đọc bài viết tại blog của boyproDX.
Nếu cảm thấy blog có nhiều bài hữu ích , các bạn hãy Bookmark(nhấn Ctrl_D) hoặc Đăng kí nhận tin qua RSS site mình để không bỏ qua các bài viết tiếp theo của mình. Chúc các bạn vui vẻ !

Logo Exchange (Tạm ngưng)

 

Chuyên trang blog về tin học | Copyright © 2009 | Best view at 1024x768 with Firefox 3