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.Với thủ thuật blogger này 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.

Featured Posts - Thủ thuật bài viết mới dạng Slider Metro cho Blogger
1.1- Đăng nhập vào blogger / blogspot
1.2- Chọn Mẫu (Templates)
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('http://1.bp.blogspot.com/-auCM3D3AuC8/Uade2vtOhpI/AAAAAAAAKLQ/8RFAqWfGCmo/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'>
Thêm 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.
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)
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://phucnguyenit.blogspot.com/feeds/posts/default/-/Blogger?start-index=1
http://phucnguyenit.blogspot.com/feeds/posts/default/-/Blogger?start-index=2
http://phucnguyenit.blogspot.com/feeds/posts/default/-/Blogger?start-index=3
http://phucnguyenit.blogspot.com/feeds/posts/default/-/Blogger?start-index=4
Nhớ thay http://phucnguyenit.blogspot.com/ bằng tên blog của bạn (VD: http://phucnguyenit.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.

Nhận xét&Bình luận

Kết nối&Chia sẻ:

Designed by www.kenhshare.net | Copyright © 2010 Template Design by Mr.Thành Công