Tạo ảnh nền (chữ kí) cho bài viết ứng với từng tác giả

Thứ Bảy, 30 tháng 5, 2009

[FD's BlOg] - Ở thủ thuật trước, thủ thuật "Tạo chữ kí (ảnh) ứng với từng tác giả ở cuối bài viết" (xem thêm ở đây) bạn Ngân (NganKVN) hỏi mình là "có thể tạo cho chữ kí (ảnh) thành ảnh nền không?" và mình có comment trả lời và có đưa ra code. Nhưng code đó mình chưa test, và bây giờ, sau khi test xong thì mình post bài này lên.

Hình ảnh minh họa:

Ở thủ thuật trước, cơ bản của thủ thuật là thêm 1 hình (chữ kí) vào cuối mỗi bài viết tương ứng với từng tác giả (sử dụng lệnh "b:if"). Nhưng nếu ảnh đó là ảnh nền thì lại là 1 thủ thuật khác.

Với blog có 1 tác giả thì việc biến chữ kí của tác giả thành ảnh nền cho bài viết rất đơn giản, ta chỉ việc thêm code CSS background vào trong code CSS của id post là xong. hoặc có thể thay thế đọan code <data:post.body/> thì đọan code như bên dưới:

Tuy nhiên với blog có nhiều thành viên thì ta không thể áp dụng được như vậy.

☼ Có 2 cách để thực hiện:
- 1 là không dùng thêm các id, class
- 2 là tạo thêm các id (như : Author1, Author2)

Và ta bắt đầu với từng cách:

1. Không dùng thêm các id :
- Vào trong code template (nhớ chọn mở rộng mẫu tiện ích)
- Tìm đọan code <data:post.body/> và thay thế nó bằng code bên dưới:

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:post.author == "Author1"'>
<div style='background: url(link ảnh chữ kí của tác giả 1) no-repeat right top;'>
<data:post.body/>
</div>
</b:if>

<b:if cond='data:post.author == "Author2"'>
<div style='background: url(link ảnh chữ kí của tác giả 2) no-repeat right top;'>
<data:post.body/>
</div>
</b:if>

<b:else/>
<data:post.body/>
</b:if>

- Save template.

2. Dùng thêm các id, class:
- vào trong code template (nhớ chọn mở rộng mẫu tiện ích)
- Thêm các đọan code CSS bên dưới vào trước dòng ]]></b:skin>

.Author1 {
background: url(link chữ kí của tác giả 1) no-repeat bottom right;
}

.Author2 {
background: url(link chữ kí của tác giả 2) no-repeat bottom right;
}

- Thay đổi code màu xanh tương ứng với vị trí mà bạn muốn hiển thị trong bài viết.

+ bottom right : góc phải bên dưới
+ top right : góc fải phía trên
+ top left : góc trái phía trên
+ bottom left : góc trái bên dưới

- Tiếp tục tìm đọan code <data:post.body/> và thay thế nó bằng code bên dưới:

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:post.author == "Author1"'>
<div class='Author1'>
<data:post.body/>
</div>
</b:if>

<b:if cond='data:post.author == "Author2"'>
<div class='Author2'>
<data:post.body/>
</div>
</b:if>

<b:else/>
<data:post.body/>
</b:if>

- Lưu ý: code màu đỏ là tên của tác giả, các bạn phải điền cho chính xác, và nhớ mã hóa các kí tự đặc biệt có trong tên tác giả, ví dụ : ", ', <, >

- Save template là xong.

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

Xem nhiều trong tuần

Giới thiệu về tôi

Tạp chí thời trang và làm đẹp

Lưu trữ Blog

Tạo ảnh nền (chữ kí) cho bài viết ứng với từng tác giả

Comments[ 0 ]

Đăng nhận xét