Hiển thị ảnh của tác giả ở tiêu đề mỗi bài viết

Different images for each post author

[FD's BlOg] - Mình đã từng post một bài về thủ thuật chèn ảnh (logo) vào tiêu đề bài viết (có thể xem ở đây), hôm nay mình sẽ ứng dụng thủ thuật này để hiển thị ảnh của tác giả vào tiêu đề của bài viết.

Thủ thuật này sẽ rất có ích cho các blog có nhiều thành viên, việc hiển thị ảnh tác giả ở mỗi bài viết sẽ tạo cho blog trông sôi động hơn.

Để cho dễ nhìn, nên dùng ảnh của các tác giả tầm từ 30x30px đến 50x50px là đẹp.

Hình minh họa kết quả:

Bây giờ ta bắt đầu thủ thuật, như thường lệ ta thực hiện các bước quen thuộc sau:
1. Đăng nhập blog
2. Vào bố cục (Layout)
3. Vào chỉnh sửa code HTML (edit code HTML)
4. Chọn "Mở rộng mẫu tiện ích" (expand widget template)
5. Chèn đọan code CSS bên dưới vào trước dòng ]]></b:skin>:

.author-fd img{
padding: 0;
float: left;
border: none;
margin: 0 10px 10px 0;

- Code CSS này là để trang trí cho ảnh của tác giả, bạn có thể tùy chỉnh theo ý của mình.
6. Tìm đọan code như bên dưới (hoặc tương tự):

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

7. Chèn đọan code bên dưới ngay sau đọan code màu đỏ :

<b:if cond='data:post.author == "AUTHOR1"'>
<span class="author"><img src="IMAGE1_URL"/></span>
</b:if>

<b:if cond='data:post.author == "AUTHOR2"'>
<span class="author"><img src="IMAGE2_URL"/></span>
</b:if>

- Lưu ý:

+ Tên tác giả : bạn phải điền chính xác tên của tác giả, phân biệt cả chữ hoa, chữ thường. Những tên tác giả có các kí tự đặc biệt như : ', ", <, > ,... sẽ làm code bị lỗi, vì thế bạn phải mã hóa chúng lại (vào đây để mã hóa code). (xem hình minh họa bên dưới)

+ Mã hóa một số kí tự cơ bản như : ' sẽ thay bằng : ' , " sẽ thay bằng: " , < sẽ thay bằng < , > sẽ thay bằng > , ...
+ IMAGE1_URL : là ảnh của tác giả thứ 1

8. Save template.

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