VNEXPRESS.NET
các bạn chắc hẳn không còn lạ lẫm gì với trang web tin tức hàng ngày
này, bạn cũng đã thấy được cách hiển thị bài viết ở trang chủ của web
này. Bài viết được hiển thị với bài mới nhất của dạng tóm tắ của một
nhãn nào đó và các bài viết khác sẽ hiển thị dạng list bên phải. Có lẽ
không ít bạn đã biết cách hiển thị bài viết như trang vnexpress
trên blog, tuy nhiên ở đây mình xin hướng dẫn các bước thực hiện thủ
thuật này để những bạn chưa biết cách thực hiện tham khảo và có thể ứng
dụng trên blog của mình.
Hình ảnh minh họa
1. Đầu tiên hãy vào tài khoản blogger
2. Vào thiết kế (bố cục) chọn sửa HTML
3. Chèn code bên dưới vào trước dòng ]]>
.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:567px;}
.folder-bottom {background:#f5f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2mFmcNH2rp4JsgfQyTr_uwULLgu4lQb0ldx9wY1kK2bp1lc-0aybJxPdft8n4j5EouzSaHa-UFJxlLx4d2go38D6UOmSqhW0ByHPB0yTc0VqM5GLAOZTqAv_dYM4MSgVEfr_qM55jMLQJ/') 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiErc9yDMLrDmwczp3mhWz1R49F-Z00BTdlAKXmwvWqn-fpFFJ8IUwbkCZrnKQVLFV5sS4bEsKkcY2lW08b0dX1WBNpj13em-8zMg1DHKrLmd6d3xbewTFm3j2AUeaTpyacuwuiyfmcj7T_/ ') repeat-x scroll 0px 0px;}
.folder-active {padding: 2px 9px; background:#f5f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiErc9yDMLrDmwczp3mhWz1R49F-Z00BTdlAKXmwvWqn-fpFFJ8IUwbkCZrnKQVLFV5sS4bEsKkcY2lW08b0dX1WBNpj13em-8zMg1DHKrLmd6d3xbewTFm3j2AUeaTpyacuwuiyfmcj7T_/ ') repeat-x 0px -23px;}
.folder-content {width:545px; 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:220px;}
.folder-news {width:545px; 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE3xHImEYBHGcuRzVSqrfLBI-Mf0154uFCh17Qhi5-shEBTnnHDRknmnKaLT9rinrddrFg6GosGVLzXOYT8wMH8GWu-hT57BE6Mxr59ZFia6VD9fIQmKAmG-Z87kySU2-fzzuYIFlJFCt6/'); 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvwBO3SH8Ss1OBsquxDuDjZpN2HMRFcXfZsb_stEIS8FFVy7mV1XCZrTUlE8YmlaynpLdpUePjrmPPZRh4_dnlp736mrsAW3PrA2TDSDaZeMzGsdYegwVf9ybiZmyOmDRC-ZEY_NWUIN7o/ ') no-repeat -5px -0px;}
.folder-activeright{width:2px; height:21px; background:#f4f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvwBO3SH8Ss1OBsquxDuDjZpN2HMRFcXfZsb_stEIS8FFVy7mV1XCZrTUlE8YmlaynpLdpUePjrmPPZRh4_dnlp736mrsAW3PrA2TDSDaZeMzGsdYegwVf9ybiZmyOmDRC-ZEY_NWUIN7o/') no-repeat -5px -23px;}
.Lead1 { font-family: 'Arial'; font-size: 11px; color: #919090; font-weight: bold }
.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:567px;}
.folder-bottom {background:#f5f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2mFmcNH2rp4JsgfQyTr_uwULLgu4lQb0ldx9wY1kK2bp1lc-0aybJxPdft8n4j5EouzSaHa-UFJxlLx4d2go38D6UOmSqhW0ByHPB0yTc0VqM5GLAOZTqAv_dYM4MSgVEfr_qM55jMLQJ/') 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiErc9yDMLrDmwczp3mhWz1R49F-Z00BTdlAKXmwvWqn-fpFFJ8IUwbkCZrnKQVLFV5sS4bEsKkcY2lW08b0dX1WBNpj13em-8zMg1DHKrLmd6d3xbewTFm3j2AUeaTpyacuwuiyfmcj7T_/ ') repeat-x scroll 0px 0px;}
.folder-active {padding: 2px 9px; background:#f5f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiErc9yDMLrDmwczp3mhWz1R49F-Z00BTdlAKXmwvWqn-fpFFJ8IUwbkCZrnKQVLFV5sS4bEsKkcY2lW08b0dX1WBNpj13em-8zMg1DHKrLmd6d3xbewTFm3j2AUeaTpyacuwuiyfmcj7T_/ ') repeat-x 0px -23px;}
.folder-content {width:545px; 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:220px;}
.folder-news {width:545px; 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE3xHImEYBHGcuRzVSqrfLBI-Mf0154uFCh17Qhi5-shEBTnnHDRknmnKaLT9rinrddrFg6GosGVLzXOYT8wMH8GWu-hT57BE6Mxr59ZFia6VD9fIQmKAmG-Z87kySU2-fzzuYIFlJFCt6/'); 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvwBO3SH8Ss1OBsquxDuDjZpN2HMRFcXfZsb_stEIS8FFVy7mV1XCZrTUlE8YmlaynpLdpUePjrmPPZRh4_dnlp736mrsAW3PrA2TDSDaZeMzGsdYegwVf9ybiZmyOmDRC-ZEY_NWUIN7o/ ') no-repeat -5px -0px;}
.folder-activeright{width:2px; height:21px; background:#f4f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvwBO3SH8Ss1OBsquxDuDjZpN2HMRFcXfZsb_stEIS8FFVy7mV1XCZrTUlE8YmlaynpLdpUePjrmPPZRh4_dnlp736mrsAW3PrA2TDSDaZeMzGsdYegwVf9ybiZmyOmDRC-ZEY_NWUIN7o/') no-repeat -5px -23px;}
.Lead1 { font-family: 'Arial'; font-size: 11px; color: #919090; font-weight: bold }
Chỉnh code: Bạn có thể download ảnh nền (link màu cam) về và upload lên trang host của mình và lấy link.
4. Bây giờ trở lại phần tử trang thêm 1 HTML/Javascript và thêm code bên dưới vào phần tử vừa tạo
">Thủ thuật blogspot
http://www.traidatmui.com/search/label/Ti%E1%BB%87n%20%C3%ADch%20blog?max-results=5">Tiện ích |
http://www.traidatmui.com/search/label/Computer?max-results=5">Tin học | http://www.traidatmui.com/search/label/Internet?max-results=5">Internet
Chỉnh sửa code: Bạn hãy thay các dòng màu xanh thành các đường link tương ứng với từng mục nhãn (dòng text màu đen đâm trong code). Và để hiển thị bài viết cho từng nhãn trên blog của bạn thì bạn hãy thay dòng label và dòng home_page thành tên nhãn bài viết và địa chỉ blog của mình.
5. Cuối cùng save lại
Với thủ thuật trên các bài viết sẽ hiển thị theo từng nhãn, nếu bạn muốn hiển thị cho toàn bộ bài viết trên blog bạn hãy thay file script trên thành file script (vnexp_label.js) bên dưới.
http://data-traidatmui.appspot.com/scripts/vnexp_post.js
» Cập nhật 29/08/2011
Theo yêu cầu của Khánh Trắng mình xin cập nhật thêm cho bài viết này, khi bạn muốn hiển thị bài viết kiểu này cho nhiều nhãn khác nhau thì buộc các bạn phải lặp lại file JS rất nhiều lần, đây cũng là một cái hơi phiền phức, để khắc phục việc lặp lại file JS đó mình có một cách nhỏ các bạn có thể tham khảo, cách này sẽ làm code trong gọn và ngắn hơn. Chúng ta sẽ bắt đàu từ bước 3 ở trên nhé, sau bước 3 bạn chèn tiếp code bên dưới vào sau thẻ hoặc trước thẻ
Bây giờ đến bước 4 chúng ta sẽ sử dụng code bên dưới để thay cho code ở trên
">Thủ thuật blogspot
http://www.traidatmui.com/search/label/Ti%E1%BB%87n%20%C3%ADch%20blog?max-results=5">Tiện ích |
http://www.traidatmui.com/search/label/Computer?max-results=5">Tin học | http://www.traidatmui.com/search/label/Internet?max-results=5">Internet
Bạn chỉnh sửa tên nhãn lại cho phù hợp, và muốn lặp lại cho các nhãn khác nhau bạn chỉ cần lặp lại code trên và thay tên nhãn cho phù hợp là đươc. Đây là cách có thể chưa tối ưu lắm, có gì các bạn trao đổi thêm nhe.
.jpg)
0 nhận xét:
Đăng nhận xét