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'>#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)
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
<!-- Đ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
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<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/AVvXsEgtV7MIukAjuhxWwKBJS5fW-s8cIMPE4UQbx2Is7X3YzaOLWsJTb59Lj1X-B7ZuGblcRf3ArCKw5oEGgPWg64vXyqeRR7VUQPkBP5HUuyE1vb40t6j8x-7mfTMx5KKXTNxTyWIky_LZtak/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/AVvXsEhVqviuvCLiZs3TbxgVeCjFiG2PiDcqBYzN0aLY3y8wJj261_U2yS2zMleqErFk4yD0qU-eBcspGiPRn-TIflBI4f3RT93YCycBeuypuV-ilnLCUAHgOIQvfMiN0lv3DUaN6ta0TiFZM_eA/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 -->
<div id="featuredNews">#note
<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.
#/note
#blsrc Một chiều mưa @leluoi
Cùng SaliproIT Blog chia sẻ Thế giới công nghệ 3 sao
0 comments :
Post a Comment