Tiện ích Recent Twitter không dùng Javascript

Thông thường để tạo tiện ích Recent Twitter, chúng ta phải dùng đến Javascript (JSON) hoặc jQuery. Tuy nhiên có một cách giúp cho tiện ích Recent Twitter được nhẹ hơn là không dùng js bằng cách sử dụng tiện ích Blog List.

Ở đây mình dùng lệnh điều kiện để thêm Avatar cho từng Username trên Twitter muốn gắn vào tiện ích.

DEMO

Để cài đặt tiện ích này, bạn hãy thực hiện theo các bước sau đây:

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Chọn Expand Widget Templates. Tìm đến thẻ đóng </b:widget> của một tiện ích bất kỳ mà bạn muốn đặt tiện ích Recent Twitter gần với nó, rồi đặt sau thẻ </b:widget> bằng đoạn code bên dưới:

1. <b:widget id='BlogList222' locked='false' title='Recent Twitter Feeds' type='BlogList'>
2. <b:includable id='main'>
3. <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
4. <ul>
5. <b:loop values='data:items' var='item'>
6. <li>
7. <!--Add Avatars -->
8. <b:if cond='data:showIcon == "true"'>
9. <span class='twitter-avatar'>
10. <b:if cond='data:item.blogUrl == "http://twitter.com/username1"'>
11. <a expr:href='data:item.blogUrl'><img src='URL_Avatar_1' /></a>
12. </b:if>
13. <b:if cond='data:item.blogUrl == "http://twitter.com/username2"'>
14. <a expr:href='data:item.blogUrl'><img src='URL_Avatar_2' /></a>
15. </b:if>
16. <b:if cond='data:item.blogUrl == "http://twitter.com/username3"'>
17. <a expr:href='data:item.blogUrl'><img src='URL_Avatar_3' /></a>
18. </b:if>
19. </span>
20. </b:if>
21. <b:if cond='data:showItemTitle == "true"'><data:item.itemTitle/></b:if>
22. <b:if cond='data:showTimePeriodSinceLastUpdate == "true"'><a expr:href='data:item.itemUrl'><data:item.timePeriodSinceLastUpdate/></a></b:if>
23. </li>
24. <div style='clear:both'/>
25. </b:loop>
26. </ul>
27. </b:includable>
28. </b:widget>

Bạn lần lượt thay Username trên Twitter tương ứng với địa chỉ từng Avatar trên Twitter (click vào hình trên Twitter để lấy URL).

Bước 2. Đặt đoạn CSS sau đây vào trước dòng ]]></b:skin>.

1. #BlogList222 .twitter-avatar {
2.     float:float:left;
3.     margin:0 .5em 0 0;
4. }
5. #BlogList222 img {
6.     width:32px;
7.     height:32px;
8.     border:1px solid #DDD;
9.     padding:1px
10. }
11. #BlogList222 ul {
12.     font:normal normal 90% Tahoma, sans-serif;
13. }
14. #BlogList222 li {
15.     border-bottom:1px dashed #666666;
16.     padding:4px 0 4px 0;
17.     margin:0
18. }

Lưu Template.

Bước 3. Vào Page Element. Tìm đến tiện ích Recent Twitter rồi chỉnh sửa, tick vào các tùy chọn như hình minh họa.

Sau đó lần lượt Add các URL tương ứng, ví dụ:

http://twitter.com/username1

http://twitter.com/username2

http://twitter.com/username3.