Fandung đã chính thức giới thiệu với các bạn  Pro TabNews mang phong cách của VnExpress, bạn có thể click vào link để đọc bài gốc. Trong bài viết này anh3ngơ giới thiệu với các bạn cách thực hiện với thủ thuật trên của Fandung để có được các Tab News theo từng danh mục chuyên biệt gồm các chuyên mục chính (parentMenu),  và các chuyên mục phụ (subMenu).
Trong đó, bài viết hiển thị trên Tab News là các bài viết thuộc chuyên mục chính.


☼ Các bước thực hiện:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code bên dưới vào trước thẻ đóng </head>
<style type="text/css">      
 .fl {float:left;}       
 .fr {float:right;}       
 .folder, .folder-title, .folder-content, .folder-bottom, .folder-header, .folder-top, .folder-news {position:relative;}       
 .folder-content {background-color:#ffffff;}       
 .other-folder {width:100%;}       
 .folder, .folder-title, .folder-content, .folder-bottom, .folder-header, .folder-top, .folder-news {overflow:hidden;}       
 .folder, .folder-title, .folder-bottom {width:500px;}       
 .folder-bottom {background:#f5f5f6 url('http://vnexpress.net/Images/Background/bg_vne.gif') repeat-x 0px -73px;}       
 .folder {margin-bottom:5px;}       
 .folder-title {height: 21px;}       
 .folder-active, .subfolder {height: 17px;}       

 .folder-title {font:11px arial; color:#868d9d; background:#f5f5f6 
url('http://vnexpress.net/Images/Background/bg_repeat.gif') repeat-x 
scroll 0px 0px;}       
 .folder-active {padding: 2px 9px; 
background:#f5f5f6 
url('http://vnexpress.net/Images/Background/bg_repeat.gif') repeat-x 0px
 -23px;}       
 .folder-content {width:478px; padding:5px 10px 
5px;font:12px arial; border-left:1px solid #d5d8de; border-right:1px 
solid #d5d8de;}       
 .folder-bottom {height:5px;}       
 .folder-topnews {width:298px; padding-right:20px;}       
 .folder-othernews {width:160px;}       
 .folder-news {width:478px; padding:0px 11px; margin-bottom:10px;}       
 .folder-news p{padding:0; margin-top:0px; margin-bottom:5px;}       
 .subfolder {padding: 3px 5px 1px;}       
 .link-folder {font:bold 12px arial; color:#8a0000; text-decoration:none;}       
 .link-subfolder {font:11px arial; color:#003f7a; text-decoration:none;}       
 .link-title {font:bold 13px arial; text-decoration:none; color:#000000;}       
 .link-title:visited {color:#004080;}       
 .link-othernews {text-decoration:none; color:#000000;font:12px arial;}       
 .link-othernews:visited {color:#004080;}       
 .link-othernews:hover {text-decoration:underline;}       
 .folder-content p{margin-top:0px;margin-bottom:4px;}       
 .folder-content ul {list-style:none;margin:0;padding:0;}       
 .folder-content li {       
 padding-left:6px;       
 background-image:url('http://vnexpress.net/Images/Background/black-square.gif'); background-repeat:no-repeat;       
 background-position: 0 7px;       
 }       
 .other-folder {margin-bottom:5px;}       
 .img-subject {height:100px; border:1px solid #a5a5a5; margin-right:8px; margin-top:2px;}       
 .img-other {width:53px; height:53px; border:1px solid #a5a5a5; margin-right:5px;}       

 .folder-activeleft{width:2px; height:21px; background:#f4f5f6 
url('http://vnexpress.net/Images/Background/bg_corner.gif') no-repeat 
-5px -0px;}       
 .folder-activeright{width:2px; height:21px; 
background:#f4f5f6 
url('http://vnexpress.net/Images/Background/bg_corner.gif') no-repeat 
-5px -23px;}       
 .Lead1 { font-family: 'Arial'; font-size: 11px; color: #919090; font-weight: bold }       
 </style>

4. Save template

5. Tạo widget HTML/Javascript rồi dán code bên dưới vào :
<div class="folder">      
 <div class="folder-title">       
 <div class="folder-activeleft fl"></div>       
 <div class="folder-active fl"><a class="link-folder" href="http://www.vnpressnet.com/search/label/Thu thuat">Thủ thuật</a></div>       
 <div class="folder-activeright fl"></div>       
 <div class="subfolder fl">       
 <a class="link-subfolder" href="http://www.vnpressnet.com/search/label/Tin tuc?max-results=10">Tin tức</a>
 | <a class="link-subfolder" 
href="http://www.vnpressnet.com/search/label/Co 
ban?max-results=10">Cơ bản</a> | <a class="link-subfolder" 
href="http://www.vnpressnet.com/search/label/Nang 
cao?max-results=10">Nâng cao</a> | <a class="link-subfolder"
 
href="http://www.vnpressnet.com/search/label/Widget?max-results=10">Tiện
 ích</a>       
 </div>       
 <div class="folder-titleright fr"></div>       
 </div>       
 <div class="folder-content" id="tdHomeFolder2">       
 <script type="text/javascript">       
 document.write(rdlabels[index]);       
 </script>       
 
 <script language="JavaScript">      
 imgr = new Array();       
 imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";       
 showRandomImg = true;       
 aBold = false;       
 summaryPost = 247;       
 sumPost = 147;       
 numposts = 6;
 label = "Phim chất lượng cao  size nhỏ";
 home_page = "http://www.vn-share4u.blogspot.com/";      
 </script>
 
 <script src="http://fandung.110mb.com/JS-files/Pro-TabNews/VnE-recent.js" type="text/javascript"></script>       
 </div>       
 <div class="folder-bottom"></div>       
 </div>

Các bạn chỉnh sửa Danh mục chính (màu đỏ) và các chuyên mục phụ (màu xanh) tương ứng với các label của Blog.
Với nhiều Danh mục chính tương ứng với tạo nhiều widget HTML/Javascript bạn chỉ cần thực hiện công việc (Bước 3 ở trên 1 lần duy nhất)

File JS trên cũng tiu, bạn nên down file JS về ràu up lên host khác nhé ^^
Chúc các bạn thành công


Tham khảo cách up file JS lên google tại ĐÂY