Tiện ích Featured Posts metro slider

Featured Posts metro slider cho blogspot

Slider này lấy ảnh thumbnail của các bài viết mới nhất có thể theo nhãn hoặc toàn bộ blog tùy lựa chọn của bạn, Bằng cách cải tiến code của tiện ích bloglisst. bạn có thể lấy ảnh từ bài viết của blog bạn hoặc blog nào khác bạn muốn. tất cả hoàn toàn tự động với giao diện 2 cột bắt mắt thích hợp cho mọi blog.

Thủ thuật này đã có trong template metro của Hồng Hòa Vi, Mình làm theo yêu cầu của Cậu bé mùa dông Bạn có thể xem demo hoặc ảnh minh họa:

VIEW DEMO

 ¤ Bước 1. Thêm Featured Posts metro slider cho blogspot/ blogger!

1.1- Đăng nhập vào blog
1.2- Chọn Mẫu (Template)
1.3- Chọn chỉnh sủa HTML (Edit HTML)
1.4- Dán code sau trước thẻ ]]></b:skin> :

.feature{margin:-18px 0 30px}
#BlogList1 a{color:#fff}
#BlogList1 ul{list-style:none;padding:0}
#BlogList1 ul li{padding:2px 0 0 2px;float:left;clear:none;width:183px}
#BlogList1 .item-content{background:transparent}
#BlogList1 .item-thumbnail{background:transparent}
#BlogList1 .item-content img{width:183px;height:183px}
#BlogList1 .item-title{line-height:1.3em;font-size:90%;min-height:50px;max-height:50px;;opacity:0.75;background:#000;margin:-63px 0 1px;padding:5px;color:#fff;overflow:hidden}
#BlogList1 ul li:first-child{height:250px!important;width:250px!important;padding:2px 0 0!important}
#BlogList1 ul li:first-child img{height:250px!important;width:250px!important}
#BlogList1 ul li:first-child + li + li + li{width:368px!important;height:64px!important;overflow:hidden}
#BlogList1 ul li:first-child + li + li + li img{width:368px!important;height:368px!important}
#BlogList1 ul li:first-child + li + li + li div.item-title{margin:-373px 0 5px;padding-right:60px;min-height:56px;max-height:56px;opacity:0.90;background: #000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUGW4K7BKJZ5pI0wDRZSKbZj1fnPr3rImfcmuE1kbJ_4t6SVEp7vu4DhyaQc8ZW3agj5O_KFbzyUa_xqRx0wZ6a-L0fVM5wKXUbb7_VH8jFF_jOgxImt1LY1FG19TLLKDPRzhzbUrksJjh/s1600/arrow-right_namkna-blogspot-com.png')  305px 7px no-repeat!important}
#BlogList1 ul li:first-child + li + li + li div.item-title a{font-size:16px;line-height:1.2em}

#BlogList2 ul{list-style:none;padding:0}
#BlogList2 ul li{padding:0 13px!important;float:left;clear:none;position:relative}

1.5- Tìm code:

<b:section class='main' id='main' showaddelement='no'>

- Them vào trước nó đoạn code bên dưới:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:section class='feature' id='feature' showaddelement='yes'>
  <b:widget id='BlogList1' locked='false' title='Feature' type='BlogList'>
    <b:includable id='main'>
<span class='fade'>        <ul>
          <b:loop values='data:items' var='item'>
            <li>
                <div class='item-content'>
                      <div class='item-thumbnail'>
                        <a expr:href='data:item.itemUrl'>
                          <img expr:src='data:item.itemThumbnail.url'/>
                        </a>
                      </div>
                  <b:if cond='data:showItemTitle == &quot;true&quot;'>
                    <div class='item-title'>
                      <b:if cond='data:item.itemUrl != &quot;&quot;'>
                        <a expr:href='data:item.itemUrl'>
                          <data:item.itemTitle/></a>
                      <b:else/>
                        <data:item.itemTitle/>
                      </b:if>
                    </div>
                  </b:if>
               </div>
            </li>
          </b:loop>
        </ul> </span><div style='clear: both;'/> 
        <b:if cond='data:numItemsToShow != 0'>
          <b:if cond='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>
        </b:if>
  </b:includable>
  </b:widget>
</b:section>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("BlogList1");
theText = bodyText.innerHTML;
theText = theText.replace(/s72-c/gi, "s300-c");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>     
<div class='clear'/>
</b:if></b:if>

1.6- Lưu mẫu lại và tiến hành bước 2.

 ¤ Bước 2. Để Featured Posts hiển thị bạn cần phải làm những việc sau.

- Sau khi thực hiện xong bước 1 bạn quay trỏa lại Bố cục (Layout) sẽ thấy có một mục Featured phí trên bài đăng.

2.1 Tìm đến Bloglist widget có tên Featured nhấn Chỉnh sửa (Edit) nó
2.2- Đánh dấu check vào chính xác 3 dòng sau

1. Tiêu đề của mục gần đây nhất (Title of most recent item).
2. Đoạn trích của mục gần nhất (Snippet of most recent item).
3. Hình thu nhỏ của mục gần đây nhất (Thumbnail of most recent item).

2.3-  Nhấn Thêm vào danh sách (Add to list) để thêm đường link vào trong Bloglist. Có tất cả 4 bài viết nên bạn cần thêm vào chính xác 4 đường link sau.

http://namkna.blogspot.com/feeds/posts/default/-/Blogspot-tips?start-index=1
http://namkna.blogspot.com/feeds/posts/default/-/Blogspot-tips?start-index=2
http://namkna.blogspot.com/feeds/posts/default/-/Blogspot-tips?start-index=3
http://namkna.blogspot.com/feeds/posts/default/-/Blogspot-tips?start-index=4

- Nhớ thay http://namkna.blogspot.com/ bằng tên blog của bạn (VD:namknatest.blogspot.com)
- Bây giờ muốn bài viết nào lên Featured Posts bạn cần gán cho nó nhãn  Blogspot-tips (viết thường, không hoa)
- Nếu bạn muốn lấy cho tất cả các nhãn thì chỉ cần xóa phần màu xanh đi là oke.