VnE Tab Recent Posts

Cũng như các style khác, thủ thuật cơ bản vẫn là không thay đổi, chỉ có chỉnh sửa 1 chút về giao diện hiển thị mà thôi. thủ thuật này cũng không có gì phức tạp, nên mình sẽ không hướng dẫn gì nhiều.

Hình ảnh minh họa thủ thuật :

* Và sau đây là các bước thực thủ thuật :

1. Vào bố cục
2. Vào phần tử trang
3. Tạo widget HTML/javascript rồi dán code bên dưới vào:

<style type="text/css">
.fl {float:left;}
.fr {float:right;}
.box-item {height:100%;}
.list-item-header {width:300px; height:21px; background:#ffffff url('http://data.fandung.com/blog/demo/VnETab-recentposts/img/folder-title2.gif') repeat-x top;}
.folder-active2 {height: 17px;padding: 2px 9px; background:#f5f5f6 url('http://data.fandung.com/blog/demo/VnETab-recentposts/img/folder-active2.gif') repeat-x bottom;}
.box-middle1 {overflow:hidden;border-left:1px solid #d5d8de; border-right:1px solid #d5d8de;}
.link-folder {font:bold 12px arial; color:#8a0000; text-decoration:none;}
.list-item1 {width:278px; padding: 5px 10px; background:#c8d4da url('http://data.fandung.com/blog/demo/VnETab-recentposts/img/box-weather.gif') repeat-x top;}
.list-item1 p{margin-top:0px; margin-bottom:5px;}
.list-item1 img{border:1px solid #a5a5a5; margin-right:10px;}
.list-item1-content {height:100%;}
.list-item1-content hr {background-color:#a4b5be; height:1px; line-height:1px; padding:0px;width:278px;}
.list-item1-content ul {list-style:none;margin:0;padding:0;}
.list-item1-content li {padding-left:6px; background-image:url('http://data.fandung.com/blog/demo/VnETab-recentposts/img/triangle.gif'); background-repeat:no-repeat; background-position: 0 6px;}
.link-listitem1-title {font:bold 13px arial; color:#004f8b; text-decoration:none;}
.link-listitem1-othernews {font:11px arial; color:#8a0000; text-decoration:none;}
.link-listitem1-othernews:hover {font:11px arial; color:#8a0000; text-decoration:underline;}
.box-bottomcenter1 {width:296px; height:1px;line-height:1px;overflow:hidden;background:#c7d3d9; border-bottom:1px solid #d5d8de;}
</style>

<div class="box-item">
<div class="list-item-header fl">
<div class="fl"><img src="http://data.fandung.com/blog/demo/VnETab-recentposts/img/folder-activeleft2.gif" alt=""></div>
<div class="folder-active2 fl"><a class="link-folder" href="http://www.fandung.com/search/label/Thu%20Thuat%20Blog?max-results=10">Blogger Tips</a></div>
<div class="fl"><img src="http://data.fandung.com/blog/demo/VnETab-recentposts/img/folder-activeright2.gif" alt=""></div>
<div class="fr"><img src="http://data.fandung.com/blog/demo/VnETab-recentposts/img/folder-topright.gif" alt=""></div>
</div>

<div class="box-middle1 list-item1 fl">
<script type="text/javascript">
home_page = "http://www.fandung.com/";
label = "Thu%20Thuat%20Blog";
numposts = 5;
sumPosts = 168;
</script>

<script type="text/javascript" src="http://data.fandung.com/blog/demo/VnETab-recentposts/rc-post-VnEtab.js"></script> 

</div>

<div class="fl">
<div class="fl"><img src="img/box-bottomleft1.gif" alt=""></div>
<div class="box-bottomcenter1 fl">&nbsp;</div>
<div class="fl"><img src="img/box-bottomright1.gif" alt=""></div>
</div>
</div>

4. Save widget.

Chúc các bạn thành công.

Nguồn mothuthuat.com