Hiển thị bài viết giống trang vnexpress.net

(Traidatmui.com) – 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 ]]></b:skin>

.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/AVvXsEj_u1feDQnRACIrMkYo40a7pbWGoKSB1-3dhFR4_3L6hNUBtDz8rCNngt2inRY9Dst3zDcAC0gbdJI7KKjJou5usO6eviVQ6eK8rMfDgue4hsva2KQvzHwWsCA_7Fzhpnd2Zr8xEw3UR22g/') 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/AVvXsEgPhDisOyshECMCeEfYNF5YwpBMaTvZju08HxzmCkF3WjatKfrsdVKcfXGOZ_D_6Ba6_ijRYKUUks_Bff4IXU8SDj3zS0GwyEC94LBD4oklM4SrAlqeRYVxi6Qzg6DTGkjBou1C7UgLl-TI/ ') repeat-x scroll 0px 0px;}
.folder-active {padding: 2px 9px; background:#f5f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPhDisOyshECMCeEfYNF5YwpBMaTvZju08HxzmCkF3WjatKfrsdVKcfXGOZ_D_6Ba6_ijRYKUUks_Bff4IXU8SDj3zS0GwyEC94LBD4oklM4SrAlqeRYVxi6Qzg6DTGkjBou1C7UgLl-TI/ ') 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/AVvXsEiqy_Swfvzp9DOCVt_Hs-FTPWstF1hkY4DC-89mEMTxUBS_ycfRIuYGh_H2O4uWrP6AWW8o-qLWotOSIarMtf8twF11Q73oPENICCiGdXKpSzr8CTnyHrraDsFNkOpG4Bm7vkPYezP7cFqd/'); 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/AVvXsEhKWYyT9SBwTvpElfEKmDLcs9ZcmVdijAPi5rU-ZvS2eKgsZn66FUc1zO82zJidg7SAruMPfl9idSAHMuwQsj7R5Fjq3tAct_i47jmJ3R-G90Mn6s5k-oc_zofp_CMaqPjvD3jld6yQ0ykM/ ') no-repeat -5px -0px;}
.folder-activeright{width:2px; height:21px; background:#f4f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKWYyT9SBwTvpElfEKmDLcs9ZcmVdijAPi5rU-ZvS2eKgsZn66FUc1zO82zJidg7SAruMPfl9idSAHMuwQsj7R5Fjq3tAct_i47jmJ3R-G90Mn6s5k-oc_zofp_CMaqPjvD3jld6yQ0ykM/') 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

<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.traidatmui.com/search/label/Advanced%20blogger?max-results=5">Thủ thuật blogspot</a></div>
<div class="folder-activeright fl"></div><div class="subfolder fl">

<a class="link-subfolder" href="http://www.traidatmui.com/search/label/Basic%20blogger?max-results=5">Basic Tips</a> |
<a class="link-subfolder" href="http://www.traidatmui.com/search/label/Ti%E1%BB%87n%20%C3%ADch%20blog?max-results=5">Tiện ích</a> |
<a class="link-subfolder" href="http://www.traidatmui.com/search/label/Computer?max-results=5">Tin học</a> | <a class="link-subfolder" href="http://www.traidatmui.com/search/label/Internet?max-results=5">Internet</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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLL5aIOBSEgXRAxzMU0cQJWAVHAIsRF8aUxWh3mHwSnL3Jn-Imu6Z7hPiZrK7RkcDkk-z05KDFsyT7skQi_T3GnTnJLd_HaOHLmUZoMk1cgsMRcgwqshUKYNjWMb-G7S3sdOYRhiiD6gc4/";
showRandomImg = true;
aBold = false;
summaryPost = 247; //số ký tự của bài viết hiển thị (bài tóm tắt)
sumPost = 147;
numposts = 6; //số bài được hiển thị
label = "Advanced blogger";
home_page = "http://www.traidatmui.com/";
</script>

<script src="http://traidatmui-tips.googlecode.com/files/vnexp_label.js" type="text/javascript"></script>
</div>
<div class="folder-bottom"></div>
</div>

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ẻ <head> hoặc trước thẻ </head>

Bây giờ đến bước 4 chúng ta sẽ sử dụng code bên dưới để thay cho code ở trên

<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.traidatmui.com/search/label/Advanced%20blogger?max-results=5">Thủ thuật blogspot</a></div>
<div class="folder-activeright fl"></div><div class="subfolder fl">

<a class="link-subfolder" href="http://www.traidatmui.com/search/label/Basic%20blogger?max-results=5">Basic Tips</a> |
<a class="link-subfolder" href="http://www.traidatmui.com/search/label/Ti%E1%BB%87n%20%C3%ADch%20blog?max-results=5">Tiện ích</a> |
<a class="link-subfolder" href="http://www.traidatmui.com/search/label/Computer?max-results=5">Tin học</a> | <a class="link-subfolder" href="http://www.traidatmui.com/search/label/Internet?max-results=5">Internet</a>
</div>

<div class="folder-titleright fr"></div>
</div>
<div class="folder-content" id="tdHomeFolder2">
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLL5aIOBSEgXRAxzMU0cQJWAVHAIsRF8aUxWh3mHwSnL3Jn-Imu6Z7hPiZrK7RkcDkk-z05KDFsyT7skQi_T3GnTnJLd_HaOHLmUZoMk1cgsMRcgwqshUKYNjWMb-G7S3sdOYRhiiD6gc4/"; // ảnh đại diện cho bài viết không có ảnh của từng nhãn
document.write("<script src=\""+home_page+"/feeds/posts/default/-/Advanced blogger?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</div>
<div class="folder-bottom"></div>
</div>

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