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

Chữ to||Chữ nhỏ
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

Xem Demo: Live Demo
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/AVvXsEhfEsWpqZL3KvDjRnnFTBjz6bSvkOw5SblapfSdubti0pmruMpWAllzuGRY-4Ab8q6-E_RtbNBpWXh908Qx5z-DS_6zXNyJF7uh3JymueYcnMgRu13gLlHzc0iMUX_QZ3lslDXSn7AwLtaK/') 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/AVvXsEhdcqmqRJI2K1munKv84-iDk_1UIEVJnrrdRa3MEw_O1TipHcpZfO0TZ9FUE5X-QC4ZpCgyuzv_1AhClWQX6J2S85_aUpK7YkCIQWcPeun6gGO0F1261lxH-0x_JVlnuZZF5oE13u4l1ce-/ ') repeat-x scroll 0px 0px;}
.folder-active {padding: 2px 9px; background:#f5f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdcqmqRJI2K1munKv84-iDk_1UIEVJnrrdRa3MEw_O1TipHcpZfO0TZ9FUE5X-QC4ZpCgyuzv_1AhClWQX6J2S85_aUpK7YkCIQWcPeun6gGO0F1261lxH-0x_JVlnuZZF5oE13u4l1ce-/ ') 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/AVvXsEi0t36KBCnBRzEB1SNPHkipIizs14HtNrpL9jHnyqrvCFmkWTTJfzbINklauvTct216OHejjkciWhLSg2sC_QWZO843E-B_gI21wsFEfus02wGchw75xBgKfPpwRR3dUmGA7EBnqs3WbrHM/'); 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/AVvXsEj6d_7a9yFvSM9RNlZHNlc1y8iEkFutnnIh49QvgBE7pTjKR8YUFiV-FlyluWZm8HvSaPtYxYIZNBRO2X3n0ym_Og4Y2i8s7MUbCHuupXRsGeLMUFTY3rl1Wb8NCNjI1nrwKvsj1ubk1K1B/ ') no-repeat -5px -0px;}
.folder-activeright{width:2px; height:21px; background:#f4f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6d_7a9yFvSM9RNlZHNlc1y8iEkFutnnIh49QvgBE7pTjKR8YUFiV-FlyluWZm8HvSaPtYxYIZNBRO2X3n0ym_Og4Y2i8s7MUbCHuupXRsGeLMUFTY3rl1Wb8NCNjI1nrwKvsj1ubk1K1B/') 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://nvdinh88.blogspot.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://nvdinh88.blogspot.com/search/label/Basic%20blogger?max-results=5">Basic Tips</a> |
<a class="link-subfolder" href="http://nvdinh88.blogspot.com/search/label/Ti%E1%BB%87n%20%C3%ADch%20blog?max-results=5">Tiện ích</a> |
<a class="link-subfolder" href="http://nvdinh88.blogspot.com/search/label/Computer?max-results=5">Tin học</a> | <a class="link-subfolder" href="http://nvdinh88.blogspot.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/AVvXsEgI5POqRp91U8mgUz6QNIquKx8RcYIJDJIvvz0SP34upRfvNSRwnE4GoGrsVTHtG9RKBvLGw7H4LtG6piRG1JXv6C4gMXoSh26WcbCaLidMjFNDX1CWnGdXJDU-VFyCZACV3kIFsf0VgbQL/";
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://nvdinh88.blogspot.com/";
</script>


<script src="http://singleboy010.110mb.com/Myfile/myjavascript/vnepresspost.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

Chúc bạn thành công
nguồn: http://nvdinh88.blogspot.com