Một kiểu phân loại bài viết cực đẹp cho blogspot

Phân loại bài viết theo những style khác nhau giúp web blog của bạn đẹp và trông cũng chuyên nghiệp.

Hôm nay, erhay xin giới thiệu với các bạn một kiểu phân loại bài viết khá đẹp mới.

Phân loại bài viết theo chủ đề by erhay

Xem hình:

Xem DEMO

Dưới đây là các bước giúp bạn thêm vào blogspot của mình style này:

Bước 1: Thêm Javascript trước </head>   (Nhấn Ctrl + F để search)

<script>
      //<![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 erhaystyle1(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="khungerhay-trai"><a href="' + posturl + '"><img src="' + img[i] + '" alt="" ></a><div class="khungerhay-trai-opa"><div class="khungerhay-opa1"><a href="' + posturl + '" target ="_top">' + posttitle + '</a><a href="' + posturl + '" target ="_top">Readmore »</a></div><div class="khungerhay-trai-content">' + removeHtmlTag(postcontent, 70) + '</div></div></div>';
    document.write(trtd);
}
if (i == 1) {
    var trtd = '<div class="khungerhay-giua"><div class="khungerhay-giua1"><a href="' + posturl + '"><img src="' + img[i] + '" alt="" ></a><div class="khung-giua1-trong"><a href="' + posturl + '" target ="_top">' + posttitle + '</a> </div></div>';
    document.write(trtd);
}
if (i == 2) {
    var trtd = '<div class="khungerhay-giua1"><a href="' + posturl + '"><img src="' + img[i] + '" alt="" ></a><div class="khung-giua1-trong"><a href="' + posturl + '" target ="_top">' + posttitle + '</a></div></div></div>';
    document.write(trtd);
}
if (i == 3) {
    var trtd = '<div class="khungerhay-phai"><div class="khung-phai-tren"><a href="' + posturl + '"><img src="' + img[i] + '" alt="" ></a><div class="khung-phai-content"><a href="' + posturl + '" target ="_top">' + posttitle + '</a></div></div>';
    document.write(trtd);
}
if (i == 4) {
    var trtd = '<div class="khung-phai-duoi"><div class="style-erhay1"><a href="' + posturl + '" target ="_top">' + posttitle + '</a>';
    document.write(trtd);
}
if (i == 5) {
    var trtd = '<a href="' + posturl + '" target ="_top">' + posttitle + '</a>';
    document.write(trtd);
}
if (i == 6) {
    var trtd = '<a href="' + posturl + '" target ="_top">' + posttitle + '</a></div></div></div>';
    document.write(trtd);
}
 j++;
}
document.write('');
}
//]]>
</script>

Bước 2: Thêm CSS trước ]]></b:skin>

/*--Style erhay1 http://www.erhay.com--*/
a{font-family:}
body{background:#EEEEEE}
ul li
{
list-style-type:none;
}
.style-erhay1
{
margin-left:5px;
}
.style-erhay1 a
{
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiSWy13ktzcvA2kB0Yv2jyJ1dha9-tGDMC1t2C_QqT6DM8jqgvh5CNcYFbJ0mBRbGqanubF17Aoso_A51i8aWGoR0ZSaYda2L1FidwWFJs7ub2HY8PfedLEqPNQe1kO-Y25CE-l5vhKiI/s10/arrow-style1-erhay.png) no-repeat -3px 10px;
padding: 9px 0px 6px 15px;
height: 30px;
overflow: hidden;
text-decoration:none;
color:black !important;
}
.style-erhay1 a:hover
{
color:#7CBB00 !important;
}
.khungerhay
{
width:764px; height:370px; overflow:hidden; background:White
}
.khungerhay-trai
{
width:330px; height:370px; overflow:hidden;background:white;border:1px solid #e0e0e0; float:left
}
.khungerhay-trai img
{
width:330px; height:370px
}
.khungerhay-trai-opa
{
max-height:88px; min-height:88px; width:285px; background:rgba(0,0,0,0.4); margin-top:-120px; z-index:0; position:relative; margin-left:10px; padding-top:10px; padding-left:10px; padding-right:10px; border-left:4px solid #7CBB00; overflow:hidden;
}
.khungerhay-trai-opa a
{
background:#7CBB00;padding:3px; color:white; font-weight:200; text-transform:uppercase; font-size:15px; text-decoration:none !important; line-height:37px;
}
.khungerhay-trai-opa a:hover
{
color:white!important;
}
.khungerhay-trai-content
{
border-right:2px solid #7CBB00; font-size:14px; padding-top:5px; color:black!important; width:265px; height:28px; background:rgba(255,255,255,0.9); padding:5px; padding-left:10px; margin-top:7px; overflow:hidden; font-family:v
}
.khungerhay-opa1
{
height:30px; overflow:hidden;
}
.khungerhay-opa1:hover
{
margin-bottom:200px;
 overflow:hidden;
height:70px;
}
.khungerhay-opa1 a:hover
{
margin-top:10px;
margin-bottom:200px;
line-height:40px;
}
.khungerhay-opa1:hover
{
height:100px !imporant;
}
.khungerhay-giua
{width:220px; height:370px; overflow:hidden; float:left; border-right:1px solid #e0e0e0;
}
.khungerhay-giua1
{
width:220px; height:185px; overflow:hidden;
}
.khungerhay-giua1 img
{width:220px; height:185px;overflow:hidden;
}
.khung-giua1-trong
{border-top:2px solid #7CBB00; height:50px; width:210px;overflow:hidden; background:rgba(0,0,0,0.4);z-index:1; margin-top:-50px; position:relative;padding:6px;
}
.khung-giua1-trong a
{
color:white;text-decoration:none;
}
.khung-giua1-trong a:hover
{
color:white !important;
text-decoration:none;
}
.khungerhay-phai
{
width:210px; height:370px;overflow:hidden; float:left; border-right:1px solid #e0e0e0;
}
.khung-phai-tren
{
width:210px; height:230px; overflow:hidden; border-bottom:1px solid #e0e0e0;
}
.khung-phai-tren img
{
width:210px; height:230px;
}
.khung-phai-content
{
height:64px; width:200px; overflow:hidden; background:rgba(0,0,0,0.4); margin-top:-80px; z-index:0; position:relative; margin-left:0px; padding-top:7px; padding-left:10px; padding-right:10px; border-left:4px solid #7CBB00;
}
.khung-phai-content a
{
background:#7CBB00;padding:5px; line-height:30px; color:white; font-weight:200; text-transform:uppercase; font-size:12px; text-decoration:none !important;
}
.khung-phai-content a:hover
{
color:white!important;
}
.khung-phai-duoi
{
padding-left:0px;border-right:1px solid #7CBB00; border-bottom:1px solid #7CBB00; width:209px; height:138px; overflow:hidden;
}

Bước 3: Đặt vị trí bạn muốn hiển thị (trong <body>)

 <div class='khungerhay'>
<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 = 7; //số bài được hiển thị
                        label = &quot;A.Máy tính&quot;;
                      </script>
                      <script src='http://www.erhay.com/feeds/posts/default/-/A.Thông điệp?orderby=updated&amp;alt=json-in-script&amp;callback=erhaystyle1' type='text/javascript'/>
</div>

OK. Vậy là đã xong. Nếu bạn có khó khăn cần giúp đỡ có thể để lại comment mình sẽ giúp đỡ.


(Vui lòng ghi rõ nguồn erhay khi sử dụng lại thông tin từ trang này)