Loading post navigation ...
 
 

Pro page

4
Nhận xét

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

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

[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:
<div style='ảnh nền') no-repeat right top;'>
<data:post.body/>
</div>


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 == &quot;item&quot;'>

<b:if cond='data:post.author == &quot;Author1&quot;'>
<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 == &quot;Author2&quot;'>
<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 == &quot;item&quot;'>

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

<b:if cond='data:post.author == &quot;Author2&quot;'>
<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.


Enter your mail address:

4

Ngankvn ®

Phức tạp nhỉ :D
Thế có nhất thiết cứ phải dính tới cái <data:post.body/> ko ??? Mình chỉ chèn chữ ký bên dưới nó là đc rồi mà ??

Ngankvn ®

À hiểu rồi - Vì để nó chìm trong phần bài nên thế phải ko :)

Có lẽ mình xài chèn bên dưới cho đẹp :)

fandung-tester

uh, nếu muốn nó là ảnh nền thì phải làm vậy thôi, không thể không dính tới thẻ <data: post.body>

Không thì cứ chèn chữ kí ở cuối bài viết là được rồi. sẽ không dính tới thẻ <data: post.body>

loc

chữ ký dưới comment được không?



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

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

Newer Posts Older Posts Home