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

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/AVvXsEgZK4Mz5MW34HYJihGbN12iRzncHrymTPP4juXBzqgwg4oddyOWeSFMvk4RKl0UIw5vaXaE-NARUCKLYmCCrKucicy8doHzR_MF4qXdUpD6fseQqw50zf56-PydjNy0_qy8Z5XGr0eRDMA6/') 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/AVvXsEjDK6IrAUPODHVUubEH0Sagj6a33r7HNBDsZMZ2-8qtddmDbwMQwYLVTxVbxD5ZO0-cIH1q-ZBN7KL65l24BjmJkMjdmgoQonfnkJ5uc3DBXiduMgQ1KEdKdtZrE1HozxDmdJtzrQSvCAwn/ ') repeat-x scroll 0px 0px;}
.folder-active {padding: 2px 9px; background:#f5f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDK6IrAUPODHVUubEH0Sagj6a33r7HNBDsZMZ2-8qtddmDbwMQwYLVTxVbxD5ZO0-cIH1q-ZBN7KL65l24BjmJkMjdmgoQonfnkJ5uc3DBXiduMgQ1KEdKdtZrE1HozxDmdJtzrQSvCAwn/ ') 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/AVvXsEj8UnRAsSwANNAoRyM8aOC8Eskl3FRJD-ZMtY2zVE5NtBKwM3YzS-K0sgpN-NAGvEppL9ODXo4HNqSywXLK-0xOmN2zWgoO_hQWatHMTaoApoRH0rZ2Dt9v_0OvpkP6z7rZe0i_S3qn2OUV/'); 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/AVvXsEj8NSQ1flDLf0YhAQrzsbamuSs8a1NzpBRpE5MoKueMwsEoRCDQKEk18jOYxpx5eICR7_5oBGyA6PnfupzBvdt64Q-OF1CPanmHx7CuTa71mfrN0ezquovzSEhCfvnkoqDvDA9A0gLu_zSZ/ ') no-repeat -5px -0px;}
.folder-activeright{width:2px; height:21px; background:#f4f5f6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8NSQ1flDLf0YhAQrzsbamuSs8a1NzpBRpE5MoKueMwsEoRCDQKEk18jOYxpx5eICR7_5oBGyA6PnfupzBvdt64Q-OF1CPanmHx7CuTa71mfrN0ezquovzSEhCfvnkoqDvDA9A0gLu_zSZ/') 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/AVvXsEjDMgJNtfoY3VjnSQmY6pD9TV8droyYWyDs7bobE-O087PvYpsSe78FSVON20ECKQQ-_xEMgC5flTjNE2LorY_wE-mc9QHBHVE5Q-1VJ95QbKDF5AfWkkmu0UOBm5UYDjL8IJZ0opt6HwrN/";
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

Chúc bạn thành công