TẠO TAB NEWS THEO PHONG CÁCH BÁO VNEXPRESS.NET - 13 August 2010 - All 4 You
Monday, 23-Jan-2017, 2:19 AM
Welcome Guest | RSS
Main » 2010 » August » 13 » TẠO TAB NEWS THEO PHONG CÁCH BÁO VNEXPRESS.NET
9:51 PM
TẠO TAB NEWS THEO PHONG CÁCH BÁO VNEXPRESS.NET
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> 

Code
<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 <!-- kém width trên 22px -->; 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 : 

Code
<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://all4u.dmon.com/Js/VnE-recent.js" type="text/javascript"></script><!-- Có thể bỏ màu tím đi --> </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). 

Chúc các bạn THÀNH CÔNG.

Nguồn: vnblognet.com


Category: Design | Views: 935 | Added by: RuaBien | Rating: 0.0/0
Total comments: 2
2  
If my problem was a Death Star, this article is a photon <a href="http://jcuyfgdkdks.com">tordpeo.</a>

1  
Super extiecd to see more of this kind of stuff online.

Only registered users can add comments.
[ Registration | Login ]
Login Form
Nhận bài qua Email


Đăng ký để nhận thông tin
và bài post mới nhất qua email

Chuyên mục
Toàn tập Dmon/ Ucoz [22]
Hướng dẫn thiết kế website với dịch vụ của Dmon.com/ Ucoz.com,...
Code [18]
Các code giúp bạn cá nhân hóa trang web của bạn
Design [21]
Các công cụ web giúp thiết kế web....
Featured Post - Image Gallery [15]
Menu [5]
Các Menu đẹp cho web của bạn
Tab Content [6]
Templates [3]
Toàn bộ thiết kế Template
Khác [0]
Rearch
Thống kê

Total online: 1
Guests: 1
Users: 0
Bản đồ truy cập
Locations of visitors to this page