Type Here to Get Search Results !

Recent filtered label - Hiển thị bài viết theo Category

DEMO
Công việc đầu tiên là ta sẽ chèn đoạn script bên dưới giữa cặp thẻ . Vào Template › Edit HTML, nhấn Ctr+F để tìm </head> và chèn ngay phía trên nó.
<script src="http://salipropham-blogspot-com.googlecode.com/files/recent-filtered-v1.jquery.min.js?u=1" type="text/javascript">
</script>
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>
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/AVvXsEgto3mHmXp-7jpy2bgh9pEOUdIra7xLIZXieBr-a9M842GihcetvdoZ_HkTK8tBr0NbISjnnrOfnx2ievUIRcHWAjBQcCtNgOMumGgcBhCegPxl-ASXX9wN98B-xfZh3Qx6FsIQHhg7Y3o/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/AVvXsEio-Ru98g7K1B-RkDLsDs4sFToVciikXRBU6oETGIF9P9i8uPvFZlRoBNJfWdWTmVIm7pqLzLlTk8zfW2r_ZmG7gihNrMVO_O8MKN0oQfsQAVzw4EyYNKVDH02ije9wfC5k3NCibA8pntA9/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 -->
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
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>
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. Nguồn http://salipropham.blogspot.com
Tags

Hiện thêm