Thay đổi giao diện cho widget Danh sách blog của blogspot

1. Tự động update icon của blog liên kết
2. Tự động đẩy liên kết update bài theo thứ tự thời gian
3. Hiển thị ngày update gần nhất cho blog liên kết
4. Thao tác thêm blog liên kết nhanh chóng

Thêm widget Danh sách blog

Cài đặt

Thêm link vào trong danh sách

Sửa cấu trúc của widget trong template

<div class='blog-list-container widget-content' expr:id='data:widget.instanceId + &quot;_container&quot;'>
        <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
          <b:loop values='data:items' var='item'>
            <li expr:style='data:item.displayStyle'>
              <div class='blog-icon left'>
                <b:if cond='data:showIcon'>
                  <img alt='icon' expr:src='data:item.blogIconUrl'/>
                </b:if>
              </div>
              
                <div class='blog-title blog-content'>
                  <a expr:href='data:item.blogUrl' target='_blank'>
                    <data:item.blogTitle/>
  <b:if cond='data:item.timePeriodSinceLastUpdate'>
    <span class='item-time'>
    Last update: <data:item.timePeriodSinceLastUpdate/>
    </span>  
                    </b:if>

                    </a>
                </div>
                <div class='item-content'>
                  <b:if cond='data:showItemThumbnail and data:item.itemThumbnail'>
                    <div class='item-thumbnail'>
                      <a expr:href='data:item.blogUrl' target='_blank'>
                        <img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
                      </a>
                    </div>
                  </b:if>
                  <b:if cond='data:showItemTitle'>
                    <span class='item-title'>
                      <b:tag cond='data:item.itemUrl != &quot;&quot;' expr:href='data:item.itemUrl' name='a' target='_blank'>
                        <data:item.itemTitle/>
                      </b:tag>
                    </span>
                  </b:if>
                  <b:if cond='data:showItemSnippet'>
                    <b:if cond='data:showItemTitle'>
                      -
                    </b:if>
                    <span class='item-snippet'>
                      <data:item.itemSnippet/>
                    </span>
                  </b:if>
                  <b:if cond='data:showTimePeriodSinceLastUpdate'>
                    <span class='item-time'>
                      <data:item.timePeriodSinceLastUpdate/>
                    </span>
                  </b:if>
                </div>
              
              <div style='clear: both;'/>
            </li>
          </b:loop>
        </ul>

        <b:if cond='data:numItemsToShow != 0 and data:totalItems &gt; data:numItemsToShow'>
          <div class='show-option'>
            <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
              <a href='javascript:void(0)' onclick='return false;'>
                <data:showNText/>
              </a>
            </span>
            <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
              <a href='javascript:void(0)' onclick='return false;'>
                <data:showAllText/>
              </a>
            </span>
          </div>
        </b:if>
      </div>

CSS

#BlogList1_container ul{padding:0;max-height:285px;overflow:auto}
#BlogList1_blogs{margin-left:16px}
#BlogList1_blogs li:first-child{margin-top:5px}
#BlogList1_blogs img {height:16px;width:16px;}
.item-time{text-align:justify;color:#ddd;padding:3px 5px;background:#6a6a6a;border-radius:5px;margin-top:-4px;float:right;margin-right:5px;display:none}
.blog-title a:hover .item-time{display:block}