Đồ họa
Blogspot
Phần mềm
Photoshop
File PhotoshopChủ Nhật, 27 tháng 11, 2011
Hiển thị bài viết giống trang vnexpress.net
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ắ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/AVvXsEjsI5ZPKpsH249Izz1W3GZzRxafjjxHs7iS5utp4BrhjPC7tNRk6Hn4iuDuu-1WtSEEysbJMqum06ta9kc0u6bfyoLa2lutyLC9mfy3h1j1WFllAb7ERH7TyRuGFmHAg7HDyBS_79MCX_EX/') 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/AVvXsEiJXtUw9m3tO5Py15VkoO1tz6lheNBgZY02u0X4ixiaZ-e3uZVH_TqtJzmFQPLNYoGuKWeZ2jnxX9wiWhGT2R7Jcgg_F_Yb7u_n4CgQ3iAyzVOAhXwFXN9jIXiwwJBEt63nH7dYAwupzlDH/ ') repeat-x scroll 0px 0px;}
.folder-active {padding: 2px 9px; background:#f5f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJXtUw9m3tO5Py15VkoO1tz6lheNBgZY02u0X4ixiaZ-e3uZVH_TqtJzmFQPLNYoGuKWeZ2jnxX9wiWhGT2R7Jcgg_F_Yb7u_n4CgQ3iAyzVOAhXwFXN9jIXiwwJBEt63nH7dYAwupzlDH/ ') 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/AVvXsEjFG68b44m80UQI0QFnvRXGl4795KhM2Ch9l3mM9bvB3xM6lOcYw2aMw_4uERLewvF7nFtfFqojN8RZI8VnuvfwRIaOvndL0X79LNGUcGTzC2GL3DbXsfCoVK_SPA63yKWIPB9YGwYlMdwv/'); 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/AVvXsEgrrUQWVgs_rlOpL7a2OH1o8fnvkjrfcF18GEBbGPbwRvKZ8zgbgz8ZMi_gZHs6RUiLZkohynuXKpc7uRO4Qhwjz9Um-vIwxMmO8pJ9TJFu-h6n4WApzvsNngK1OI2YXoAVBRXYCW8akcLk/ ') no-repeat -5px -0px;}
.folder-activeright{width:2px; height:21px; background:#f4f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrrUQWVgs_rlOpL7a2OH1o8fnvkjrfcF18GEBbGPbwRvKZ8zgbgz8ZMi_gZHs6RUiLZkohynuXKpc7uRO4Qhwjz9Um-vIwxMmO8pJ9TJFu-h6n4WApzvsNngK1OI2YXoAVBRXYCW8akcLk/') 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/AVvXsEjsI5ZPKpsH249Izz1W3GZzRxafjjxHs7iS5utp4BrhjPC7tNRk6Hn4iuDuu-1WtSEEysbJMqum06ta9kc0u6bfyoLa2lutyLC9mfy3h1j1WFllAb7ERH7TyRuGFmHAg7HDyBS_79MCX_EX/') 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/AVvXsEiJXtUw9m3tO5Py15VkoO1tz6lheNBgZY02u0X4ixiaZ-e3uZVH_TqtJzmFQPLNYoGuKWeZ2jnxX9wiWhGT2R7Jcgg_F_Yb7u_n4CgQ3iAyzVOAhXwFXN9jIXiwwJBEt63nH7dYAwupzlDH/ ') repeat-x scroll 0px 0px;}
.folder-active {padding: 2px 9px; background:#f5f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJXtUw9m3tO5Py15VkoO1tz6lheNBgZY02u0X4ixiaZ-e3uZVH_TqtJzmFQPLNYoGuKWeZ2jnxX9wiWhGT2R7Jcgg_F_Yb7u_n4CgQ3iAyzVOAhXwFXN9jIXiwwJBEt63nH7dYAwupzlDH/ ') 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/AVvXsEjFG68b44m80UQI0QFnvRXGl4795KhM2Ch9l3mM9bvB3xM6lOcYw2aMw_4uERLewvF7nFtfFqojN8RZI8VnuvfwRIaOvndL0X79LNGUcGTzC2GL3DbXsfCoVK_SPA63yKWIPB9YGwYlMdwv/'); 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/AVvXsEgrrUQWVgs_rlOpL7a2OH1o8fnvkjrfcF18GEBbGPbwRvKZ8zgbgz8ZMi_gZHs6RUiLZkohynuXKpc7uRO4Qhwjz9Um-vIwxMmO8pJ9TJFu-h6n4WApzvsNngK1OI2YXoAVBRXYCW8akcLk/ ') no-repeat -5px -0px;}
.folder-activeright{width:2px; height:21px; background:#f4f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrrUQWVgs_rlOpL7a2OH1o8fnvkjrfcF18GEBbGPbwRvKZ8zgbgz8ZMi_gZHs6RUiLZkohynuXKpc7uRO4Qhwjz9Um-vIwxMmO8pJ9TJFu-h6n4WApzvsNngK1OI2YXoAVBRXYCW8akcLk/') 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
http://www.traidatmui.com/search/label/Basic%20blogger?max-results=5">Basic Tips |
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://traidatmui-tips.googlecode.com/files/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
http://www.traidatmui.com/search/label/Basic%20blogger?max-results=5">Basic Tips |
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.
Chúc bạn thành công
Theo http://www.traidatmui.com/2010/08/hien-thi-bai-viet-giong-trang.html
You may also...
Hot
-
Bài 2 hướng dẫn sử dụng phần mềm Simatic S7.200 để viết chương trình điều khiển cho PLC. Ngoài ra, cũng hướng dẫn sử dụng phần mềm Simulator... -
Bài 1 trình bày tổng quan về PLC S7.200, cấu trúc phần cứng, phương thức hoạt động của PLC S7.200. Đồng thời nêu những ưu điểm khi các nhà... -
Babylon là phần mềm từ điển và dịch thuật hàng đầu thế giới, cung cấp cho bạn công cụ trực quan nhất cho mọi nhu cầu dịch thuật của mìn... -
(Traidatmui.com) – Hiện nay có rất nhiều trang website cung cấp cho bạn host miễn phí tuy nhiên không phải hosting nào cũng tốt, cũng đảm... -
Có khá nhiều bạn thắc mắc, gửi yêu cầu cho tôi về cách cài đặt phần mềm cho PLC của Mitsubishi. Tuy nhiên, vì quá bận nên tới nay mới hướng ... -
Phần mềm tiện lợi trong việc vẽ các sơ đồ mạch điện công nghiệp, được hỗ trợ đầy đủ các kí hiệu của các thiết bị dùng trong công nghiệp như...
-
1 CÁC LỆNH VÀO / RA OUTPUT: Sao chép nội dung của bit đầu tiên trong ngăn xếp vào bit được chỉ định trong lệnh. Nội dung của ngăn xếp không ... -
( Traidatmui.com) – Hôm nay xin chia sẻ cùng các bạn thủ thuật tạo Slideshow cho hình ảnh, thủ thuật này mình có thêm hiệu ứng Sroll với 2... -
[FD's BlOg] - Footer của bài viết có chứa tiện ích như : Người đăng, thời gian post bài, nhãn comment... Các bạn có thể chỉnh sửa the... -
[FD's BlOg] - Một vài lệnh đơn giản từ CSS kết hợp với tiện ích " Recent posts " sẽ tạo cho bạn 1 thanh tin tức đơn giản. Do...
Comments[ 0 ]
Đăng nhận xét