Home » Thủ thuật blog
Hiển thị ảnh của tác giả ở tiêu đề mỗi bài viết
[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

+ 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.

- Mạng xã hội theo dõi với hiệu ứng rê chuột cho blogspot
- Mudim - Thêm bộ gõ tiếng Việt cho blogspot
- Hiệu ứng màu chạy lấp lánh trong chữ cho blogspot
- Thủ thuật thêm "comment mới gần đây nhất" cho blogspot
- Template dịch vụ, công ty giới thiệu cho blogspot
- Thủ thuật tạo khung liên kết thanh cuộn cho blogspot
- Nút điều khiển lên xuống toàn trang cho blogspot
- Menu ngang co kèm hình ảnh bên cạnh rất đẹp
- Hiệu ứng Like page Facebook (FB), G+, twitter động cực đẹp cho Web, blogspot
- CSS3 với hiệu ứng hình ảnh động cực đẹp cho Web, blogspot
- Bài viết liên quan cho blogspot - Hiệu ứng ảnh thu nhỏ
- Thủ thuật thêm thống kê Blog 3 trong 1 cho blogspot
Comments[ 0 ]
Đăng nhận xét