Ở đâ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:
- <b:widget id='BlogList222' locked='false' title='Recent Twitter Feeds' type='BlogList'>
- <b:includable id='main'>
- <b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
- <ul>
- <b:loop values='data:items' var='item'>
- <li>
- <!--Add Avatars -->
- <b:if cond='data:showIcon == "true"'>
- <span class='twitter-avatar'>
- <b:if cond='data:item.blogUrl == "http://twitter.com/username1"'>
- <a expr:href='data:item.blogUrl'><img src='URL_Avatar_1' /></a>
- </b:if>
- <b:if cond='data:item.blogUrl == "http://twitter.com/username2"'>
- <a expr:href='data:item.blogUrl'><img src='URL_Avatar_2' /></a>
- </b:if>
- <b:if cond='data:item.blogUrl == "http://twitter.com/username3"'>
- <a expr:href='data:item.blogUrl'><img src='URL_Avatar_3' /></a>
- </b:if>
- </span>
- </b:if>
- <b:if cond='data:showItemTitle == "true"'><data:item.itemTitle/></b:if>
- <b:if cond='data:showTimePeriodSinceLastUpdate == "true"'><a expr:href='data:item.itemUrl'><data:item.timePeriodSinceLastUpdate/></a></b:if>
- </li>
- <div style='clear:both'/>
- </b:loop>
- </ul>
- </b:includable>
- </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>.
- #BlogList222 .twitter-avatar {
- float:float:left;
- margin:0 .5em 0 0;
- }
- #BlogList222 img {
- width:32px;
- height:32px;
- border:1px solid #DDD;
- padding:1px
- }
- #BlogList222 ul {
- font:normal normal 90% Tahoma, sans-serif;
- }
- #BlogList222 li {
- border-bottom:1px dashed #666666;
- padding:4px 0 4px 0;
- margin:0
- }
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.
{ 0 comments... read them below or add one }
Post a Comment