Home »
Thứ Hai

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



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é!

  Để 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 
 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àoTemplate › 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
1
2
3
<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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!-- Đ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/AVvXsEgVesUe6oO2ulWrDU68XcYly4qIIaqgODOrEbTGgQHAbUfEqaONV7qsOLxmLbKbwkADjw1NLF3UvxjtlkkygrrbMfffwpYYANsRv-ShXqloORKiyu37zYwVvD1yiLQQoSEIoXx-NcWriHo/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/AVvXsEgd0whjH4NU5PEfEvCBzoigvenT6MuJONs6lqOSVXhKJPssBY3ypeX6lfYgqRLRl2QPsT4GWjS3MwlmGClPnf1GfGdFv0nJiYDSD1nEmWRx3hwaDW46nekpLBDJUK-zH7iBH0DChnTW8CdG/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ạiDashboard > 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>
Tags: ,

You may also...

Comments[ 0 ]


Đăng nhận xét

Bài đăng phổ biến