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] = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVLzJpt6sP45_LxzYfCFah_YKlKZP_MoVUNNRc8UELJ3E4n6sGVX-f3g0RdfexnqHL05gq8fs7ixI7rnuLNQryxlQs52MgH_SQ_jqFnu-9LEuhmp2LEUo93TJSo_kcHt3z7aJ42YA5WCzM/&quot;;
                          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 = &quot;A.Máy tính&quot;;
                        </script>
                        <script src='/feeds/posts/default/-/Chuyên mục của bạn?orderby=published&amp;alt=json-in-script&amp;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)