Gán hình ảnh theo nhãn cho bài đăng

Bạn cần giúp đỡ?

Chào bạn! Đã bao giờ khi xem lại trang blog của mình và bạn muốn có thêm điều gì đó tạo nên sự khác biệt mà chỉ riêng blog bạn có? Nếu câu trả lời là có thì hôm nay khi đến với bài viết này bạn đã tìm đúng nơi rồi đấy!!!

Thủ thuật mình giới thiệu đến bạn chính là gán hình ảnh theo nhãn cho bài đăng - bạn có thể bắt gặp ở trang chủ blog của mình. Rất thú vị phải không nào?

Bắt đầu thủ thuật.

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

.post{position:relative}
.Label1{background-image:url(...img);display:block;width:70px;height:70px;line-height:72px;text-indent:-9999px;position:absolute;bottom:-15px;right:-15px;z-index:9999!important}
.Label2{background-image:url(...img);display:block;width:70px;height:70px;line-height:72px;text-indent:-9999px;position:absolute;bottom:-15px;right:-15px;z-index:9999!important}
.Label3{background-image:url(...img);display:block;width:70px;height:70px;line-height:72px;text-indent:-9999px;position:absolute;bottom:-15px;right:-15px;z-index:9999!important}

Mình không biết bài đăng trên blog của bạn được chia theo những nhãn gì nên không thể làm trước hình ảnh cho bạn được. Nhưng đừng lo vào cuối bài mình sẽ cung cấp rất nhiều mẫu đẹp cho bạn chọn lựa.
Và hãy chú ý chỗ mình để chữ màu vàng nhé rất quan trọng một lúc nữa mình sẽ giải thích cụ thể.

Bước 2: Tìm đến thẻ <body> và thêm vào ngay sau nó đoạn code

<script type='text/javascript'>
function lebel_logo(etiqueta) {
labelnes = new Array();
labelnes[1] = "<div class='Label1'/>"
labelnes[2] = "<div class='Label2'/>"
labelnes[3] = "<div class='Label3'/>"

if (etiqueta == "Nhãn 1")
{document.write(labelnes[1]);}
if (etiqueta == "Nhãn 2")
{document.write(labelnes[2]);}
if (etiqueta == "Nhãn 3")
{document.write(labelnes[3]);}
}
</script>

Trong đó Nhãn 1, Nhãn 2, Nhãn 3 chính là tên nhãn bạn muốn hiển thị (Mở rộng nếu bạn muốn có n Nhãn muốn được gán hình ảnh thì hãy thêm với cú pháp hoàn toàn tương tự vào đoạn code trên)

Bước 3: Trong chế độ Mở rộng Mẫu Tiện ích tìm đến đoạn mã (đầu tiên)

<div class='post-footer'>

Và thêm vào ngay trên nó, nhớ là ngay trên đoạn code

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:loop values='data:post.labels' var='label'>
<script type='text/javascript'>lebel_logo("<data:label.name/>");</script>
</b:loop>
</b:if></b:if>

Ok save lại template của bạn. Thủ thuật đã hoàn thành!

Tuts: Giờ mình sẽ giải thích những chữ màu vàng được mình đánh dấu là quan trọng.
Đầu tiên hãy cùng xem hình

Gán hình ảnh theo nhãn cho bài đăng Blogspot

Để ý đến 4 vị trí ở 4 góc thân bài post - lấy blog của mình minh họa nhé. Ta sẽ có 4 cặp vị trí lần lượt là top-left | top-right | bottom-left | bottom-right

Ở trong đoạn code mẫu ở Bước 1 mình sử dụng cặp vị trí bottom-right chính là vị trí mà blog mình đang sử dụng. Hình ảnh sẽ được hiển thị ở góc bên phải dưới cùng của thân bài đăng. Và với mỗi trường top - bottom - left - right ta có thêm giá trị xác định, trong ví dụ là -15px.

Với quy ước

+ Khi mang dấu "+" ảnh sẽ thụt vào trong phần thân của bài đăng

- Khi mang dấu "-" ảnh sẽ trồi ra khỏi phần thân của bài đăng

Với điểm 0 chính là trùng với viền của thân bài đăng

==>> Để hiểu sâu hơn về vị trí tương đối giữa các thành phần hãy tìm hiểu thêm về hàm position mà trong bài này sử dụng position:relative và position:absolute

Hãy chọn vị trí bạn muốn hình ảnh xuất hiện dựa theo ví dụ và chọn giá trị thích hợp cho nó.

Với việc xác đinh vị trí tuyệt đối giữa ảnh của nhãn và đường bao ngoài của bài đăng ta hoàn toàn có thể áp dụng thủ thuật cho cả những blog sử dụng template có 2 chế độ xem là List và Grid. Bạn có thể xem blog Demo của mình

Note: Một số lỗi có thể mắc phải.
Hỏi: Mình làm theo đúng như trong hướng dẫn và cho hình ảnh sâu xuống góc của bài đăng nhưng khi đến viền của bài đăng thì hình ảnh bị khuất?
Đáp: Trong code CSS của template bạn đang dùng hãy tìm đến #outer-wrapper , #main-wrapper , .post , ... Hoặc tương tự những thành phần bao ngoài phần bài đăng của bạn và xóa đi thuộc tính overflow:hidden

Bonus: Và đây là một số mẫu ribbon mình đã chọn lọc từ vài chục mẫu, sử dụng file .eps và .ai những file vecter rồi save lại ảnh dưới định dạng .png rất dễ dàng cho bạn sử dụng và chỉnh sửa.