Hiển thị thông tin bài viết trên sidebar

Tạo một khung thông tin bài viết như tác giả, thời gian đăng bài, số nhận xét đặt trên sidebar là một cách bố trí mới lạ mà bạn có thể bạn hiếm thấy trên cộng đồng blogspot. Thực ra để tạo tiện ích này, mình lại dùng đến sự kỳ diệu của cấu trúc XML sẵn có trong Template của blogspot.

DEMO

Trong một Template thì dữ liệu bài viết nằm trong tiện ích Blog Posts có ID là Blog1. Chính vì Blog Posts là một tiện ích nên nó cũng có nhiều ID giống như một tiện ích HTML/Javascript vậy, tức là nó có thể có ID như Blog2, Blog3, Blog4 … Lợi dụng mấu chốt này, mình đã gắn thêm một tiện ích Blog Posts có ID là Blog2 lên sidebar của Template để hiển thị thông tin bài viết như vậy.

Sau khi đăng nhập Blogger vào Design >> Edit HTML, chọn mở rộng mẫu tiện ích. Sử dụng từ khóa Blog1 để tìm đến đoạn code như thế này:

1. <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
2. ..............
3. ..............
4. ..............
5. </b:widget>

Đoạn code như trên nói chung rất dài, mình chỉ cần lấy những đoạn cần thiết liên quan đến thông tin bài viết. Sau khi hoàn thành đoạn code cho tiện ích Blog Posts có ID là Blog2 như bên dưới, mình sẽ đặt nó sau dòng <b:section class='sidebar' id='sidebar' preferred='yes'>.

1. <b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'>
2. <b:includable id='nextprev'/>
3. <b:includable id='post' var='post'>
4.   <div class='side_post_meta'>
5. <div class='item'>
6. <span class='post_labels'>
7.       <b:if cond='data:post.labels'>
8.         <data:postLabelsLabel/>
9.         <b:loop values='data:post.labels' var='label'>
10.           <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
11.           <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
12.         </b:loop>
13.       </b:if>
14.     </span>
15.     </div>
16. <div class='item'>
17. <span class='post_author'>
18. <b:if cond='data:top.showAuthor'>
19. <span><data:post.author/></span>
20. </b:if></span>
21. </div>
22. <div class='item'>
23. <span class='post_published'>
24. <b:if cond='data:top.showTimestamp'>
25. <span> <data:post.timestamp/></span></b:if>
26. </span>
27. </div>
28. <div class='item'>
29. <span class='post_comment'>
30. <b:if cond='data:post.allowComments'>
31. <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' title='Go to comments'>
32. <data:post.numComments/> nhận xét</a> <b:else/>Comments Off</b:if></span>
33. </div>
34. </div>
35. <div class='clear'/>
36. </b:includable>
37. <b:includable id='main' var='top'>
38.   <b:if cond='data:blog.pageType == &quot;item&quot;'>
39.     <b:loop values='data:posts' var='post'>
40.       <b:include data='post' name='post'/>
41.     </b:loop>
42.   </b:if>
43. </b:includable>
44. <b:includable id='comments' var='post'/>
45. </b:widget>

Đến đây bạn chỉ cần tùy biến CSS để định dạng cho tiện ích vừa gắn vào, đặt CSS theo định dạng tương tự bên dưới vào trước dòng </b:skin>.

1. div.side_post_meta {
2.   background-color: #fff;
3.   border: 1px solid #333;
4.   padding: 10px;
5. }
6. div. side_post_meta div.item {
7. ...... Bạn đặt thuộc tính CSS vào những vị trí này nhé
8. }
9. div.side_post_meta span.post_labels {
10. ......
11. }
12. div.side_post_meta span.post_author {
13. ......
14. }
15. div.side_post_meta span.post_published {
16. ......
17. }
18. div.side_post_meta span.post_comment {
19. ......
20. }

Về CSS, bạn có thể mày mò nghiên cứu thêm để vận dụng cho blogspot của mình. Nếu có gì không rõ xin vui lòng nêu vấn đề tại đây. Lưu Template là hoàn tất.