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"> </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
Đăng nhận xét