[FD's BlOg] - Bài viết này mình lại giới thiệu cho các bạn 1 TabNews hiển thị các bài viết mới nhất theo từng nhãn theo phong cách của VnExpress. Điểm nổi bật của thủ thuật này là việc hiển thị random các bài viết theo nhãn mỗi khi reload trang hoặc chuyển trang, thêm vào đó thành Header của TabNews sẽ thay đổi tương ứng với Nhãn được hiển thị bài viết, như vậy sẽ dễ dàng hơn cho người đọc nhận biết được nhãn (chuyện mục)mình đang xem.Xem demo: LIVE DEMO
Ở TabNews sẽ gồm có các nhãn khác nhau có chung điểm nào đó, ví dụ như ta có các nhãn như :"Ảnh vui, Xe độ, Nghe nhạc,..." có chung 1 điểm là Thư Giãn chẳng hạn. Ngòai ra TabNews còn có phần SumPost là title cho các link liên kết
Hình ảnh minh họa:
- Ngoài ra ở phần Header của TabNews sẽ thay đổi theo đúng với nhãn được hiển thị bài viết (xem hình minh họa bên dưới)
Đối với nhãn "Chuyện Lạ"
Đối với nhãn "Thư Giãn"
☼ 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>
<script type='text/javascript'>
rdlabels = new Array(3);
//Nhãn thứ 1 : Chuyện Lạ
rdlabels[0] = "\<script\>label = 'Chuyen%20La'\;\</script\>\<div class='folder-activeleft fl'\>\</div\>\<div class='folder-active fl'\>\<a class='link-folder' href='http://fandung.blogspot.com/search/label/Chuyen%20La?max-results=10'\>Chuyện Lạ\</a\>\</div\>\<div class='folder-activeright fl'\>\</div\>\<div class='subfolder fl'\>\<a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Film?max-results=10'\>Điện Ảnh\</a\> | \<a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Xe?max-results=10'\>Xe Độ\</a\> | \<a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Relax?max-results=10'\>Thư Giãn\</a\>\</div\>";
//Nhãn thứ 2 : Chuyện Xe Độ
rdlabels[1] = "\<script\>label = 'Xe'\;\</script\>\<div class='folder-activeleft fl'\>\</div\>\<div class='folder-active fl'\>\<a class='link-folder' href='http://fandung.blogspot.com/search/label/Xe?max-results=10'\>Xe Độ\</a\>\</div\>\<div class='folder-activeright fl'\>\</div\>\<div class='subfolder fl'\>\<a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Chuyen%20La?max-results=10'\>Chuyện Lạ\</a\> | \<a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Film?max-results=10'\>Điện Ảnh\</a\> | \<a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Relax?max-results=10'\>Thư Giãn\</a\>\</div\>";
//Nhãn thứ 3 : Điện Ảnh
rdlabels[2] = "\<script\>label = 'Film'\;\</script\>\<div class='folder-activeleft fl'\>\</div\>\<div class='folder-active fl'\>\<a class='link-folder' href='http://fandung.blogspot.com/search/label/Film?max-results=10'\>Điện Ảnh\</a\>\</div\>\<div class='folder-activeright fl'\>\</div\>\<div class='subfolder fl'\>\<a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Chuyen%20La?max-results=10'\>Chuyện Lạ\</a\> | \<a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Xe?max-results=10'\>Xe Độ\</a\> | \<a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Relax?max-results=10'\>Thư Giãn\</a\>\</div\>";
//Nhãn thứ 4 : Thư Giãn
rdlabels[3] = "\<script\>label = 'Relax'\;\</script\>\<div class='folder-activeleft fl'\>\</div\>\<div class='folder-active fl'\>\<a class='link-folder' href='http://fandung.blogspot.com/search/label/Relax?max-results=10'\>Thư Giãn\</a\>\</div\>\<div class='folder-activeright fl'\>\</div\>\<div class='subfolder fl'\>\<a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Chuyen%20La?max-results=10'\>Chuyện Lạ\</a\> | \<a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Film?max-results=10'\>Điện Ảnh\</a\> | \<a class='link-subfolder' href='http://fandung.blogspot.com/search/label/Xe?max-results=10'\>Xe Độ\</a\>\</div\>";
index = Math.floor(Math.random() * rdlabels.length);
</script>
- Thay đổi tên nhãn và link liên kết của nhãn lại cho phù hợp với blog của bạn.
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">
<script type='text/javascript'>
document.write(rdlabels[index]);
</script>
<div class="folder-titleright fr"></div>
</div>
<div class="folder-content" id="tdHomeFolder2">
<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;
home_page = "http://fandung.blogspot.com/";
</script>
<script src="http://data.fandung.com/blog/demo/pro-tabnews-VnE-fix/VnE-recent.js" type="text/javascript"></script>
</div>
<div class="folder-bottom"></div>
</div>
☼ Cập nhật yêu cầu của bạn 9xhot:
- Thay vì Header của TabNews sẽ thay đổi mỗi khi Load trang theo đúng như bài viết hiển thị thì ở yêu cầu này phần Header sẽ ko thay đổi, và thay vào đó ta sẽ thêm 1 phần gọi là chuyên mục chính (parentMenu), với các Nhãn được hiển thị sẽ là các chuyên mục phụ (subMenu). Với yêu cầu này thì thủ thuật ở trên sẽ trở nên đơn giản hơn 1 chút.
- Xem demo : LIVE DEMO
Hình minh họa:
☼ Các bước thực hiện cũng tương tự như trê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>
<script type='text/javascript'>
rdlabels = new Array(3);
//Nhãn thứ 1 : Chuyện Lạ
rdlabels[0] = "\<script\>label = 'Chuyen%20La'\;\</script\>";
//Nhãn thứ 2 : Chuyện Xe Độ
rdlabels[1] = "\<script\>label = 'Xe'\;\</script\>";
//Nhãn thứ 3 : Điện Ảnh
rdlabels[2] = "\<script\>label = 'Film'\;\</script\>";
//Nhãn thứ 4 : Thư Giãn
rdlabels[3] = "\<script\>label = 'Relax'\;\</script\>";
index = Math.floor(Math.random() * rdlabels.length);
</script>
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="#">Giải Trí</a></div>
<div class="folder-activeright fl"></div>
<div class="subfolder fl">
<a class="link-subfolder" href="http://fandung.blogspot.com/search/label/Relax?max-results=10">Thư Giãn</a> | <a class="link-subfolder" href="http://fandung.blogspot.com/search/label/Chuyen%20La?max-results=10">Chuyện Lạ</a> | <a class="link-subfolder" href="http://fandung.blogspot.com/search/label/Film?max-results=10">Điện Ảnh</a> | <a class="link-subfolder" href="http://fandung.blogspot.com/search/label/Xe?max-results=10">Xe Độ</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;
home_page = "http://fandung.blogspot.com/";
</script>
<script src="http://data.fandung.com/blog/demo/pro-tabnews-VnE-fix/VnE-recent.js" type="text/javascript"></script>
</div>
<div class="folder-bottom"></div>
</div>
Chúc các bạn thành công.
Nhãn:
Blogger Tips
Bài đăng trước đó
Nhận xét
0 nhận xét cho bài: "Pro TabNews mang phong cách của VnExpress"
Đăng nhận xét