• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

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

4
07/10/2011

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.

{4 bình luậnAdd yours ?}

08:25:00, 8 thg 10, 2011

Chà Bloglist dùng được cho nhiều việc thế.

Reply
10:47:00, 8 thg 10, 2011

lại thêm 1 khám phá thú vị nữa

Reply
22:14:00, 28 thg 9, 2016

nghe nói fb và gg đang mua lại twitter


Manchester United

Reply
21:32:00, 25 thg 10, 2016

please thing of a meeting


cách trị mụn

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn