[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://fandung.110mb.com/JS-files/Pro-TabNews/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://fandung.110mb.com/JS-files/Pro-TabNews/VnE-recent.js" type="text/javascript"></script>
</div>
<div class="folder-bottom"></div>
</div>
Chúc các bạn thành công.
Công cụ tìm kiếm bài viết trên FD's BlOg bằng Google. Điền từ khóa muốn tìm và nhấn Tìm Kiếm.
Tổng số :
47
Em chờ cái này lâu lắm rồi, nhưng mong muốn thì hơi khác 1 chút. Anh FD có thể edit cho em giống với ý tưởng trong ảnh này ko?
http://i182.photobucket.com/albums/x263/orcsy/p2.jpg
trong đó parent là label chứa tất cả các bài từ các label của submenu như trong site của em.
Thanks anh FD. :D
Summary post phai lam the nao`
summaryPost = 247; thay số 247 thành số khắc.
Còn code : sumPost = 147; có thể giữ nguyên, cái này ko quan trọng lắm. nó dùng để hiển thị title cho link của bài viết.
@9xhot : ý em nói là thay vì Header nó thay đổi theo bài viết hiển thị, thì bây giờ ta cho nó cố định, và chuyển Nhãn hiện hành thành parentMenu còn các Nhãn khác là SubMenu
Nếu đúng như vậy thì đơn giản hơn.
bạn thay đổi code này để làm cho nó nhỏ lại
Vậy cách làm thế nào, anh chỉ cho em với.
Nhận tiện cho em hỏi làm cách nào để tạo nhiều tab menu khác nhau trên trang chủ?
Còn muốn cho chỉ hiển thị bài viết ở parentMenu thì em bỏ code JS ở bước 3 đi, rồi thêm code bên dưới vào trong thẻ <script> ở bước 5 là xong:
label = "ABC";
với ABC là nhãn của parentMenu
numposts = 6;
Còn muốn tạo nhiều TabNews giống trang VnExpress thì em cứ tạo thêm các widget HTML/Javascript khác rồi dán code tương tự như thủ thuật này vào thôi. Cái này đơn giản mà
Chúc dũng có thêm nhiều thủ thuật hay, cái thủ thuật này của em anh tìm mãi mà không được, đến giờ thấy nó đẹp quá lại không thực hiện vì ai cũng bảo là bản sao của vnexpress thì không thích chút nào.
Dù sao cũng Cám ơn công sức em đã bỏ ra nhé.
Cảm ơn nhiều
Mình làm theo cách của 9xhot, khi thêm nhiều tabnews bằng cách thêm nhiều Widget rồi dán vào. Nhưng sao chỉ có phần Submenu và parentmenu thì khác nhau, còn phần Othernews của mỗi Tabnews lại giống nhau hết vậy? Phan Dũng hướng dẫn giúp mình nhé! Thanks
Ví dụ widget 1, bạn đặt là rdlabels1, widget 2 đặt là rdlabels2
Lưu ý : những đoạn nào trong code của thủ thuật có chữ rdlabels thì bạn nên đổi lại hết, để cho nó không bị trùng, như thế thì mới hiển thị được các bài viết khác nhau ở các widget
Link bài viết là http://www.vnpressnet.com/2009/09/tao-tab-news-theo-phong-cach-bao-chi.html
http://photo.zing.vn/photo/gallery/detail.8876026.html
sorry mình không biết cách post ảnh trực tiếp, Dũng vui lòng click vào link trên coi vậy nhé.
Ngoài ra còn có code CSS, code CSS là phần để tạo nên template cho blog của bạn.
Có thể nói 2 ngôn ngữ này là để nhất trong phần thiết kế web, vì thế bạn chịu khó bỏ thời gian ra tìm hiểu sẽ rành hết thôi.
Bạn có thể vào trang www.w3schools.com để tìm hiểu thêm.
thank anh nhiều!
mình làm như vậy thì được rồi, bạn xem tấm hình này đi
http://c.uploadanh.com/upload/1/235/0.638915001254892054.jpg
Mình muốn làm giông như trang http://sohoa.vnexpress.net. Ở menu "TƯ VẤN" đó, lúc mình click vào mỗi Label thì nó hiện bài của Label đó ngay ở phía dưới (Trong trang SoHoa thì có các Label : Điện Thoại, Nghe Nhìn, Máy Tính ...). Mình muốn giống như vậy đó.
FD cố gắng giúp mình với nhé. Cám ơn nhiều !
http://blog4vn.blogspot.com
@Blog4vn : mình hiểu ý bạn, cái tab đó tương tự như tab này. Nó chỉ khác là dùng thêm 1 đoạn script để có thêm hiệu ứng hiển thị bài viết khi click vào nhãn. Nhưng nếu làm cách này thi tiện ích sẽ rất nặng. Do nó phải load thêm 1 file JS và truy xuất 1 lúc hết tất cả các nhãn, trong khi đó ở thủ thuật này nó chỉ cần truy xuất 1 nhãn cho 1 lần load, mà không cần load thêm file JS hỗ trợ nào.
CHo mình hỏi thêm nữa với:
Thứ nhất: Mình muốn cho khoảng cách giữa 2 widget giảm xuống
http://img188.imageshack.us/img188/7029/123xu.jpg
Thứ 2: Tại sao khi mình click vào 1 Label bất kỳ thì tất cả các widget vẫn không ẩn đi, nó vẫn nằm ở phía trên.
Thứ 3: Mình muốn những bài mới nhất (những bài mình mới post đó) nó luôn nằm trên những Label mà mình đã làm, mình thấy toàn bài cũ không à.
FD cố gắng giúp mình với nhá.
http://blog4vn.blogspot.com
Hiệu quả : Hình không tràn qua bên trái (lấn chỗ của sidebar) như mình muốn mà nó lại tràn qua bên phải. Đúng như bạn nói-trông rất xấu.
Mới đọc được bài "Ẩn sidebar khi xem bài viết" của Phan Dũng.link :
Mình nghĩ có thể nó là cái mình đang cần (hình sẽ mở rộng thế chỗ của sidebar)>
Nhưng ở bước 1 mình không tìm thấy dòng code
như trong bài viết.(Mình đang sử dụng template Harbor)
Bạn giúp mình xem có thể thực hiện với cái template này không.
Cảm ơn bạn.
» Nội dung phải liên quan tới chủ đề bài viết.
» Hãy để lại tên của bạn khi bạn post bài comment, để mình có thể dễ dàng trả lời comment của bạn khi cần.
» Có thể sử dụng các thẻ <b>,<i>,<a>.
BlOg FD.