Tiện ích Recent posts đẹp cho Blogger

Tiện ích Recent posts có rất nhiều phiên bản trong và ngoài nước, bao gồm cả RP cho toàn bộ blog hoặc đơn giản chỉ cho 1 label cụ thể nào đó, hôm nay xin giới thiệu cho các bạn RP dạng mới gần giống như tiện ích RP news.zing.vn (đã được giới thiệuở đây) . Vì là tiện ích quá quen thuộc nên mình sẽ không hướng dẫn chi tiết. Đây là thủ thuật mới nhất của FanDung, với màu sắc và bố cục rất đẹp.

Hình ảnh minh họa

Xem DEMO : PC Tab Recent Posts

* Các bước thực hiện :

1. Vào Thiết kế (Design)

2. Vào phần tử trang

3. Tạo 1 widget HTML/javascript rồi dán code bên dưới vào:

<link href="http://data.fandung.com/blog/demo/PCtab-recentposts/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.top-left
{
background-image:url(http://data.fandung.com/blog/demo/PCtab-recentposts/gray-box-top.png);
background-repeat:repeat-x;
background-position:right center;
height:29px;
}
.top-right
{
background-image:url(http://data.fandung.com/blog/demo/PCtab-recentposts/gray-box-top.png);
background-repeat:repeat-x;
background-position:left center;
margin-right:5px;
height:28px;
padding-top:1px;
}
.bottom-left
{
margin:0;
padding:0;
vertical-align:top;
background-image:url(http://data.fandung.com/blog/demo/PCtab-recentposts/red-box-bottom.png);
background-repeat:repeat-x;
background-position:left top;
height:8px;
}
.bottom-right
{
margin:0;
padding:0;
vertical-align:top;
background-image:url(http://data.fandung.com/blog/demo/PCtab-recentposts/red-box-bottom.png);
background-repeat:repeat-x;
background-position:right top;
height:8px;
margin-left:10px;
}
</style>

<div class="article-list-tabbed-box">
<div class="top-left">
<div class="top-right" style="padding-left: 7px;">
<div style="float: left; margin-right: 4px; font-size: 11px;cursor: pointer; font-weight: bold" class="is-section"> Blogger</div>
<div class="sc_menu" style="float: left; overflow-x: hidden; overflow-y: hidden; ">

<ul class="tab-header sc_menu">
<li class="tab-name" ><a href=" http://phungbaokien.blogspot.com/search/label/KHOA%20H%E1%BB%8CC">KHOA HỌC</a></li>
<li class="sep">|</li>
<li class="tab-name" ><a href=" http://phungbaokien.blogspot.com/search/label/TH%E1%BB%A6%20THU%E1%BA%ACT">THỦ THUẬT</a></li>
<li class="sep">|</li>
<li class="tab-name"><a href=" http://phungbaokien.blogspot.com/search/label/D%C3%80NH%20CHO%20B%E1%BA%A0N%20G%C3%81I">DÀNH CHO BẠN GÁI</a></li>
</ul>
</div>
<div style="clear: both"></div>
</div>
</div>

<div style="clear: both;" class="zone">

<script type="text/javascript">
home_page = "http://www.vnblognet.com/";
label = "Khoi%20tao%20Blog";
numposts = 11;
sumTitle = 40;
sumTitle2 = 65;
sumPosts = 151;
textmore = "Xem tiếp ...";
labelURL = "http://www.fandung.com/search/label/Khoi%20tao%20Blog?max-results=10";
</script>
<script type="text/javascript" src=" http://data.fandung.com/blog/demo/PCtab-recentposts/rc-post-PC-all.js
"></script>
 </div>
<div class="bottom-left"><div class="bottom-right"></div></div>
</div>


- Nếu muốn hiển thị cho cả blog thì dùng file js bên dưới :
http://data.fandung.com/blog/demo/PCtab-recentposts/rc-post-PC-all.js

4. Save widget.

- Một chú ý nhỏ, nếu số bài viết bạn muốn hiển thị lớn hơn số bài viết có ở 1 nhãn thì tiện ích sẽ không hiển thị.

Ví dụ 1 nhãn tên “Label1” hiện có 7 bài viết, nhưng giá trịnumposts bạn set là 8 thì tiện ích sẽ không hiển thị, khi đó bạn phải thay đổi lại giá trịnumposts thành 7 hoặc nhỏ hơn. Lưu ý, giá trị numpost không được nhỏ hơn 5.

THỦ THUẬT 19:58