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

Widget Danh sách blog của blogspot anh em có thể sử dụng để Liên kết link với các blog khác như demo ở blog của mình

Một số ưu điểm

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

Vào Bố cục sau đó thêm widget như hình dưới

Cài đặt

Cài đặt theo hướng dẫn như hình

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

Thêm mục mới

Thêm link

Chọn nguồn cấp dữ liệu, các bạn chọn gì cũng được

Sửa lại tên hiển thị của blog liên kết sau đó lưu lại

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

Vào template chọn widget Danh sách blog vừa tạo ra
Thông thường nếu là widget Danh sách blog đầu tiên trong blog được các bạn tạo ra sẽ có ID là BlogList1, nhưng mình vừa thêm để làm hướng dẫn nên nó là BlogList2

Đoạn code trong template sẽ có dạng như sau

Bạn chỉ cần để ý đoạn code được đánh dấu như hình trên, cụ thể là đoạn code <div class='widget-content'></div> sau đó thay thế toàn bộ bằng đoạn code bên dưới

<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

Sử dụng đoạn CSS bên dưới để tạo giao diện cho widget trên

#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}

Như vậy là anh em đã có 1 widget Liên kết link xịn xò rồi đấy :D