Tab Menu

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

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(http://3.bp.blogspot.com/-008RJtZxqhs/TovUaq5fmrI/AAAAAAAAARU/kNJKFx4IMe4/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(http://4.bp.blogspot.com/-qg7CXkXooN8/TkOhskmMWXI/AAAAAAAAKws/mhp9rC8Rwsk/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

Hiện có 14 comments

Hoang Nghia

Chào bạn! Cho mình hỏi nếu muốn tạo cho 2 cái recent post trên cùng 1 dòng giống như trang chủ của bạn thì phải làm sao? Chỉ mình nhé! ^^

Salipro Phạm

Hi@Hoang Nghia , bạn chỉ cần thêm style cho vùng chứa recent post. Ví vụ
.featuredNews {
float: left;
width: 40%;
}

Hoang Nghia

Mình đã làm giống như bạn chỉ, nhưng nó chỉ hiện 1 các recent post ở trên và 1 cái ở dưới chứ ko có hiện 2 cái trên cùng 1 dòng ^^!

Salipro Phạm

@Hoang Nghia có thể gửi link để mình xem trực tiếp và cùng bạn khắc phục nó nhé.

Hoang Nghia

Link nè bạn: http://watermatk.blogspot.com/

Salipro Phạm

Chào @Hoang Nghia , bạn chỉ cần chỉnh lại css một chút là ok. Kết quả mà mình đã test đây Click me .
Đầu tiên là

.HTML {
margin: 0px 5px;
display: inline-block;
}
.itechplus-rc {
width: 240px;
float: left;

Để đoạn css trên thực sự có tác dụng, bạn cần thay đổi lại xi'. Class bạn nên để giống nhau, chỉ khác nhau cái id thui nhe'
<div id="itechplus-rc1" class="itechplus-rc">
<div id="itechplus-rc2" class="itechplus-rc">
Và xóa các style cũ của bạn liên quan tới các #itechplus-rc, #itechplus-rc2...
Chúc bạn thành công ;)!!

Hoang Nghia

Mình làm đc rồi, nhưng mà nếu mình xóa các style cũ liên quan tới các #itechplus-rc, #itechplus-rc2... thì sao chỉnh đc độ rộng với canh lề của từng recent post hả bạn!:D

Thang edward

ban ơi! mình làm theo như bạn nhưng mà nó hiện ra trống trơn! là ntn nhỉ

Thang edward

mình không thấy phần nào nó cho hiển thị tin bài ở đoạn code cuối. bạn xem lại được k ?

Dao Nguyen

Cảm ơn bạn đã chia sẻ. Thật hay. Đây là blog của mình Expinf.Com
mình đang có gắng tìm hiểu để xây dựng tốt hơn.

Buzzed

Bạn cho mình hỏi là mình tạo được label rồi nhưng đăng bài thì bài ko hiển thị vào nhãn đó. vậy là làm sao thế :((

Hai Nguyen Thanh

hi, sao cua minh làm xong nó hiện mỗi cái khung xong bài viết k có nhỉ ( mình có feed rôi )

Phi Phi Lê

bạn ơi , cái code cúi cùng mình chèn vào, đổi tên nahn4 , bài viết cập nhẬT NHÃN RÙI mà nó ko hiện bài viết của nhãn thì làm sao ?

Cai Thuoc La
This comment has been removed by a blog administrator.

Post a Comment

Bạn có thể tự do cho ý kiến, thảo luận về bài viết này nhưng phải theo những điều khoản sau:
- Phải nghiêm túc, không dung tục, không spam.
- Nội dung phải liên quan đến bài viết.
- Không mang tính chất chính trị...
- Hạn chế sử dụng Ẩn danh, hãy dùng Tên/URL để thay thế.
Lưu ý : Có thể sử dụng tag HTML cơ bản trong comment: br, b, i, u, a href= ...

:)
:(
;)
:D
=))
:-/
:x
I-)
@-)
=D:
:-q
:-w
[-X
B-)
:((
:-B
:-h
:x(
:-*
~O)
@};-

About

RSS
Coming soon... :))