Tạo Tab News theo phong cách báo chí chuyên nghiệp

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 = "Thu thuat";
home_page = "http://www.vnpressnet.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)
Các bạn có thể xem Demo luôn tại weblog này (www.VnPressNet.com).

Cám ơn Fandung với thủ thuật này.
File .JS có thể download về để tránh trường hợp host 110mb hỏng tại đây.
Bạn có thể upload file .js lên các host free theo hướng dẫn tại Upload file .js lên host free.
Chúc các bạn THÀNH CÔNG.

Share on Facebook Share on Twitter Share on Google Plus

About HotNews

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.