Hiển thị tên những người đã comment ngay bên dưới bài viết
Thứ Bảy, 16 tháng 5, 2009
Modify post footer - Show comment author in post footer[FD's BlOg] - Một thủ thuật cho phép bạn làm đẹp footer của bài viết. Thủ thuật sẽ hiển thị tên những người đã comment bài viết. Một cách để tạo nên sự sôi động cho bài viết cũng như là cho blog của bạn, nhất là những blog có nhiều người comment. Và việc hiện thị số lượng người comment này ta có thể điều chỉnh được.
Hình minh họa thủ thuật:
☼ Ta bắt đầu thủ thuật:
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 javascript này vào sau thẻ <head>
<script src='http://fandung.110mb.com/JS-files/fd-comments.js' type='text/javascript'/>
6. Tiếp tục xuống dưới tìm đọan code sau:
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
7. Thêm đọan code màu đỏ vào như bên dưới:
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<script expr:src='"http://www.blogger.com/feeds/4987055759836993091/" + data:post.id + "/comments/default?orderby=published&alt=json-in-script&max-results=500&callback=rp"' type='text/javascript'/>
<b:if cond='data:post.allowComments'>
<noscript>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
<b:else/>
<data:post.numComments/> <data:top.commentLabelPlural/>
</b:if>
</a>
</noscript>
</b:if>
</b:if>
</span>
- Chú ý : các dòng code màu xanh ở trên :
+ 4987055759836993091 : đây là mã ID của blog bạn, vào bảng điều khiển để xem mã số này (như hình bên dưới)
+ max-results=500& : dòng code này dùng để tùy chỉnh việc hiển thị tối đa số ngừoi comment, ví dụ bạn muốn cho hiển thị tối đa 20 người thì thay số 500 thành 20.
+ Ngòai ra code màu tím là để thiết lập không cho thủ thuật hiển thị ở bài viết, nếu bạn muốn nó chỉ hiển thị ở bài viết thì thay dấu " != " thành " == ", và nếu muốn nó hiển thị ở tất cả các trang thì xóa code màu tím đi.
- Nếu bạn muốn trang trí nó như ví dụ của mình thì thêm vào dòng code màu xanh như bên dưới:
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<div style='padding: 5px 2px 2px 5px; border:2px dotted #FF0000; background:#C3FDB8;'>
<script expr:src='"http://www.blogger.com/feeds/4987055759836993091/" + data:post.id + "/comments/default?orderby=published&alt=json-in-script&max-results=500&callback=rp"' type='text/javascript'/>
<b:if cond='data:post.allowComments'>
<noscript>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
<b:else/>
<data:post.numComments/> <data:top.commentLabelPlural/>
</b:if>
</a>
</noscript>
</b:if>
</div>
</b:if>
</span>
- Và nếu muốn nó hiển thị ở dòng đầu tiên của post footer (như hình minh họa mình đưa) thì bạn di chuyển (copy và xóa) tòan bộ code ở trên và dán nó sau vào sau dòng code này : <div class='post-footer-line post-footer-line-1'>, và nó sẽ trông giống như bên dưới:
<div class='post-footer-line post-footer-line-1'>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<div style='padding: 5px 2px 2px 5px; border:2px dotted #FF0000; background:#C3FDB8;'>
<script expr:src='"http://www.blogger.com/feeds/4987055759836993091/" + data:post.id + "/comments/default?orderby=published&alt=json-in-script&max-results=500&callback=rp"' type='text/javascript'/>
<b:if cond='data:post.allowComments'>
<noscript>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
<b:else/>
<data:post.numComments/> <data:top.commentLabelPlural/>
</b:if>
</a>
</noscript>
</b:if>
</div>
</b:if>
</span>
8. Cuối cùng là save template.
Chúc các bạn thành công.
- 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
- Giải pháp Blogger bị chặn 02/07/2012
- Các truy vấn cơ bản với Blogspot
- Nâng cấp ANC Gdata lên phiên bản 2.
- Hướng dẫn config domain cho hầu hết các mạng.
- Khắc phục hiện tượng chặn web của VNPT.
Comments[ 0 ]
Đăng nhận xét