Tạo phân loại top 4 bài viết trên trang chủ giống vnexpress

Có bạn hỏi mình làm sao để tạo hiển thị bài viết giống vnexpress (top 4 bài viết đại diện trên trang chủ). Trong hướng dẫn này mình sẽ hướng dẫn mọi người cách thêm phân loại này vào blogspot của bạn.

Bước 1: Thêm CSS.

Bạn search với khóa ]]></b:skin>

Sau đó thêm CSS vào trước đó :

#topnews{width:1000px;margin: 0 0 10px;overflow: hidden; margin:0 auto}
.topfour{width:510px; float:left; overflow:hidden; margin:12px 0px 0px 10px;}
.contenttopnews{width:500px; height:165px; margin:0px 0px 10px; float:left; overflow:hidden; padding:0px 0px 10px; border-bottom:1px solid #d3d4d6;}
.img-me,.a-topsubject{width:250px; height:195px; float:left; overflow:hidden; position:relative; margin:0px 10px 0px 0px;}
.divbox12{width:250px; height:165px; background:url() no-repeat 0px 0px; position:absolute; z-index:1; top:0px; left:0px;}
.mytitle{font:bold 21px ; color:#9f224e; margin:0px 0px 10px;}
.newstoplnk{font:bold 21px ; color:#9f224e; text-decoration:none;}
.fonth2{font:12px ; color:#000; margin:0px 0px 10px;}
.timep{margin:0px 0px 5px;}
.homelist{font:11px ; color:#666; margin:0px 5px 0px 0px;}
.home-span-list{font:11px ; color:#000; padding:0px 0px 0px 16px; background:url() no-repeat 0px 1px;}
/*.ld1{background:url() no-repeat 0px 7px;float:left;padding:3px 0px 0px 9px;font:bold 11px ; color:#666666; text-decoration:none;}*/
.ld1{padding:3px 0px 0px 0px;font:bold 11px ; color:#666666; text-decoration:none;}
.topthr{height:171px; width:100%; float:left; overflow:hidden;}
.cont3{width:160px; height:170px; margin:0px 10px 0px 0px; float:left; display:inline;}
.hh120{width:160px; height:120px;position:relative; margin:0px 0px 3px; overflow:hidden; float:left;}
.divbox2{width:160px; height:120px;position:absolute; background:url() no-repeat 0px 0px; top:0px; left:0px; z-index:1;}
.titleh2{margin:0px;}
.titlelnk{font:12px ; color:#000; text-decoration:none;}

Bước 2: Thêm trước </head> đoạn Javascript dưới đây :

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function modun(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('');
   for (var i = 0; i < numposts; i++) {
   var entry = json.feed.entry[i];
   var posttitle = entry.title.$t;
var pcm;
   var posturl;
   if (i == json.feed.entry.length) break;
   for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'alternate') {
   posturl = entry.link[k].href;
   break;
   }
   }
for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
   pcm = entry.link[k].title.split(" ")[0];
   break;
   }
   }    if ("content" in entry) {
   var postcontent = entry.content.$t;}
   else
   if ("summary" in entry) {
   var postcontent = entry.summary.$t;}
   else var postcontent = "";
   postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+cmcolor+'">('+pcm+' '+text+')</font></i>' : '';

var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
//var daystr = (showPostDate) ? '<i><font color="'+cmcolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";
posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;
if ((i == 0)){
var trtd = '<div class="contenttopnews"><a class="img-me" href="'+posturl+'"><img style="height:160px; width:245px" src="'+img[i]+'" alt=""></a><h1 style="font-size:20px!important" class="mytitle"><a class="newstoplnk" href="' + posturl + '" target ="_top">' + posttitle + '</a><div style="font:verdana; font-size:11px; padding-top:20px; line-height:1.5; color:black">'+removeHtmlTag(postcontent,300)+'</div></div>';
document.write(trtd);
}
if((i == 1)){
var trtd = '<div class="cont3"><a class="hh120" href="'+posturl+'"><img src="'+img[i]+'" alt="" class="label_thumb"></a><h5 style="font-size:11px"><a class="titlelnk" href="' + posturl + '" target ="_top">' + posttitle + '</a><div class="fonth2">'+removeHtmlTag(postcontent,0)+'</div></div>';
document.write(trtd);
}
if((i == 2)){
var trtd = '<div class="cont3"><a class="hh120" href="'+posturl+'"><img src="'+img[i]+'" alt="" class="label_thumb"></a><h5 style="font-size:11px"><a class="titlelnk" href="' + posturl + '" target ="_top">' + posttitle + '</a><h5 class="fonth2">'+removeHtmlTag(postcontent,0)+'</h5></div>';
document.write(trtd);
}
if((i == 3)){
var trtd = '<div class="cont3"><a class="hh120" href="'+posturl+'"><img src="'+img[i]+'" alt="" class="label_thumb"></a><h5 style="font-size:11px"><a class="titlelnk" href="' + posturl + '" target ="_top">' + posttitle + '</a><h5 class="fonth2">'+removeHtmlTag(postcontent,0)+'</h5></div>';
document.write(trtd);
}
j++;
}
document.write('');
}
//]]>
</script>

Bước 3: Đặt vị trí bạn muốn hiển thị phân loại này :

<div class='topfour' id='topfour'>
<script type='text/javascript'>
document.write(rdlabels[index]);
</script>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYyb12YZKjKqrBh0HjV2lAD8fN7JURPWfvwrlWNJlpmaCwpIFSmAwxmpzOForRtIa67qh0814ZOwydyQgKjk5XZ-M3IWnBSCwkgVO0Mnrdvz3pQe8Fk-pNx_sMiqHPX_hy6V-J9xGn-APd/";
showRandomImg = true;
aBold = false;
summaryPost = 0; //số ký tự của bài viết hiển thị (bài tóm tắt)
sumPost = 0;
numposts = 4; //số bài được hiển thị
label = "A.Máy tính";
</script>
<script src='/feeds/posts/default/-/Chuyên mục của bạn?orderby=published&alt=json-in-script&callback=modun' type='text/javascript'/>
</div>

Bước 4: Save Template.

(Vui lòng ghi rõ nguồn erhay khi bạn phát hành thông tin từ trang này)

Nguồn : chúng tôi sưu tầm từ nhiều nguồn

Thiết kế web chuyên nghiệp giá rẻ

Chúng tôi tuyên thiết kế web chuyên nghiệp đẳng cấp giá rẻ với 5 năm kinh nghiệm trong lĩnh vực thiết kế website nếu các bạn có nhu cầu có thể liên hệ Hotline: 0962 66 57 57 || Email: cmay.tt@gmail.com || website: cmay.vn