Recent filtered label Recent filtered label for Blogger - Blogspot
Đây là một thủ thuật khá hay giúp hiển thị bài viết theo từng nhóm bài (Label), nó trông rất chuyên nghiệp như việc hiển thị các mục trên một trang tin tức. Chính s cũng rất ấn tượng khi lần đầu tiên nhìn thấy sự hiện diện của nó trên blog của một ai đó, s lao vào tìm hiểu và bây giờ s chia sẻ cùng với các bạn. Bắt đầu ngay nhé!

#bl3 Để các bạn thấy những gì mà thủ thuật này làm được hãy xem demo tại:
Recent filtered #bllink
#bl2 Công việc đầu tiên là ta sẽ chèn đoạn script bên dưới giữa cặp thẻ <head> </head>. Vào Template › Edit HTML, nhấn Ctr+F để tìm </head> và chèn ngay phía trên nó
#code  <script src="http://salipropham-blogspot-com.googlecode.com/files/recent-filtered-v1.jquery.min.js?u=1" type="text/javascript"></script> #/code
#bl2 Tiếp theo là chọn vị trí để đặt các Filter Zone, ở đây s sẽ chọn đặt trên trang chủ (bạn cũng có thể đặt nó ở bất cứ đâu bạn muốn), ngay sau phần hiển thị bài đăng. Tìm đến những dòng sau
<b:section class='main' id='main-article' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
#bl2 Thêm ngay bên dưới đoạn code này (với đoạn này bạn sẽ tạo các vùng thêm gadget với tối đa là 5)
<!-- Đoạn code Recent filter label -->
<b:if cond='data:blog.homepageUrl == data:blog.url'> 
<b:if cond='data:blog.pageType != &quot;item&quot;'>                                 
      <b:section class='tabs feature-cont' id='left-featured-cont' maxwidgets='5' showaddelement='yes'/>
      <b:section class='tabs feature-cont' id='right-featured-cont' maxwidgets='5' showaddelement='yes'/>
<style type="text/css">
#blog-pager{display:none;visibility:hidden}
.feature-cont{margin:12px;height:100%;float:left;width:315px}
#left-featured-cont,#right-featured-cont{}
#featuredNews{float:left;width:660px;margin:0;padding:0}
#featuredNews .featuredStyle{background:#ddd;width:320px;float:left;margin:0 10px 10px 0;padding:0}
#featuredNews .labelTitle{height:30px;margin:0 0 5px 0;padding:0 0 0 10px;line-height:2.5em;font-size:13px;font-family:"Open Sans Condensed",Arial,Tahoma !important;display:block;text-transform:uppercase;font-weight:bold;border-bottom:4px solid #4999cc}
#featuredNews .labelTitle a:link,.labelTitle a:visited{color:#333;font-size:14px;font-weight:bold}
#featuredNews .labelTitle a:hover{color:#5e5e5e}
#featuredNews .index{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB2wgzKWBR-vnlQJlXS5LYASXR6BcIjnbf2UX65h1B8hdChB0sCaGcrjQJH1S7DL0xAi1jxrn7CojgRMKXsCXz0CVdDrpqpJde0tVxpQLMcYiMvNJ5zsNHgQi_-Y2qmnVM-ConW3GPcFI/s1600/feed.png) no-repeat center left !important;float:right;margin:5px 0 0 0;padding:0 10px 0 15px;display:block}
#featuredNews .recentCol{padding:0;margin:0;height:auto;border-bottom:2px solid #cfcfcf;overflow:hidden}
#featuredNews .advertise{background:#fff;width:320px;float:left;margin:0 10px 10px 0;padding:0;border-bottom:2px solid #cfcfcf}
#featuredNews .advertise .widget{margin:0;padding:10px}
#featuredNews .itg {list-style-type:none;padding:0;margin:0}
#featuredNews .itg li{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRF8dwySpDAhFNcmfcOSaR424egWmOE6cqW1HQSQOjcYzw4ikJGwbiQhTO_fiAftXyAPYOoe4vp9fL6w7rggYno9n4fZExT341olGZxMEhO966S23fQuHIRMY4SQLKrSp5WlkFCUsTOkMl/s1600/list_bg.png) no-repeat left 10px; display:block; padding:3px 0 3px 10px;margin:0 10px; border-bottom:1px dotted #eaeaea; max-height:90px; overflow:hidden;}
#featuredNews .itg img.recentThumb{float:left;margin:5px 5px 0 0;border:1px solid #999;background:#FFF;width:64px;height:48px;padding:3px}
#featuredNews .itg div {font-size:11px;line-height:18px;}
</style>
</b:if></b:if>
<!-- END: Đoạn code Recent filter label -->
#bl2 Save - Vậy là ta đã kết thúc phần khó nhất của thủ thuật. Và bây giờ bạn bạn trở lại Dashboard > Layout sẽ thấy 2 vùng thêm gadget mới được tạo thành như thế này
#bl2 Tiếp theo bạn click vào Add a Gadget > HTML/JavaScript và thêm đoạn script sau đây vào phần nội dung
<div id="featuredNews">
<div class="featuredStyle section" id="featured1">
<script>
document.write('<span class="index"><a href="/feeds/posts/default/-/Demo?">RSS</a></span>');
document.write('<span class="labelTitle"><a href="/search/label/Demo?&max-results=5">DEMO</a></span>');
</script>
<div class="recentCol" id="zone1">
<div class="loading" style="height: 270px; width: 100%;">
</div>
</div>
<script type="text/javascript">
RecentFilteredPost({
 'maxPost':5,    // Số bài viết
 'tag':['Demo'],   // Tên label
 'containerId':'#zone1',   // Tên vùng hiển thị (Zone)
 'imgEna':1,    // Hiển thị thumbnail
 'ulClass':'itg',   
 'showDesc':true    // Hiển thị đoạn nội dung bài viết đầu tiên
});
</script>
</div>
</div>
#note
Bạn lưu ý thay đổi vùng chứa (zone1) cho từng label nhé. Nếu để trùng chúng sẽ hiển thị được 1 label mà thui.
#/note
#blsrc Một chiều mưa @leluoi
Cùng SaliproIT Blog chia sẻ Thế giới công nghệ 3 sao