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

Phân loại bài viết theo chủ đề blogspot (tiếp)

Như phần trước mình đã giới thiệu với các bạn 2 kiểu phân loại bài viết theo chủ đề.

Một là dạng list có ảnh, 2 là dạng thumbnail.

Bài viết này sẽ hướng dẫn 1 kiểu phân loại khác. Hy vọng bạn sẽ giúp ích cho bạn trong việc tạo web trên blogger.

Kiểu phân loại có ảnh bài viết đại diện lớn.

Mời bạn xem ảnh demo. Đây cũng là một style mình sử dụng ngay trên trang chủ.

Với kiểu phân loại này. bạn sẽ hiển thị được 6 bài viết tất cả. Load khá nhẹ nhàng và nhanh nên bạn yên tâm.

Code để thêm vào webblog của bạn.

- THÊM CSS : Bạn đặt code CSS sau trước ]]></skin>    Nhấn (Ctrl + F) để tìm

.erhayclass1
{
float:left; width: 335px; height: 384px; overflow:hidden;
}.khungerhay{height:372px; width:528px; padding-bottom:10px;border-radius:7px; background:white;overflow:hidden; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);}

.erhayclass2
{
width:335px; height:384px;
}
.erhayclass3
{
margin-top:-100px;padding-left:10px;padding-top:20px; background-color: rgb(0, 0, 0);background-color: rgba(0, 0, 0, 0.2); position:relative; height:100px;
}
.erhayclass4
{
margin-top:-100px;color:white; font-weight:bold; font-size:14px;
}
.erhayclass5
{
float:left; padding:5px; width:182px; max-height:367px; overflow:hidden;
}
.erhayclass6
{
width:182px; height:204px;
}
.erhayclass7
{
height: 25px;margin-top: -46px;background-color: rgb(0, 0, 0);background-color: rgba(0, 0, 0, 0.4);position: relative;padding: 10px;
}
.erhayclass8
{
font-weight:normal !important; color:white;
}
.ul-other li{color:#000; background:url(https://lh3.googleusercontent.com/-IH1HDqxvVHw/UV1Fiep1AYI/AAAAAAAAEbg/mOtm6DAy5mI/s3/3_3.gif) no-repeat 0px 6px; padding:2px 0px 0px 7px; margin:0px 0px 5px; display:block;}
a:link, a:visited {
color: #5c74c8;
text-decoration: none;
outline: none;
font-weight: 200;
}
ul li a {
list-style-type: none;
font-size: 11px;
}
.ul-other {
width: 175px;
margin: 0px 0px 0px;
padding: 0px;
list-style-type: none;
float: left;
overflow: hidden;
padding-top: 20px;
padding-left: 5px;
}
.h2leadHN {
font: 12px;
color: #000;
margin: 0px 0px 10px;
}
.other-folder {
width: 100%;
float: left;
}
.h3Lead {
font: 12px;
color: #000;
padding-top: 2px;
margin: 0px;
}

- THÊM JAVASCRIPT TRƯỚC </HEAD>             

<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 erhay1(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><div class="erhayclass1"><a style=""  href="'+posturl+'"><img src="'+img[i]+'" alt="" class="erhayclass2" style=""></a><div class="erhayclass3" style=""><a class="erhayclass4" style="" href="' + posturl + '" target ="_top">' + posttitle + '</a></div><h3 class="h3Lead">'+removeHtmlTag(postcontent,270)+'</h3></div>';
document.write(trtd);
}


if(i==1)
{

var trtd = '<div class="erhayclass5" style=""><div class="other-folder"><a  href="'+posturl+'"><img src="'+img[i]+'" alt="" style="" class="erhayclass6"></a><div class="erhayclass7" style=""><a class="erhayclass8" style="" href="' + posturl + '" target ="_top">' + posttitle + '</a></div><h2 class="h2leadHN">'+removeHtmlTag(postcontent,0)+'</h2>';
document.write(trtd);
}
if(i==2)
{
var trtd = '<ul class="ul-other"><li><a class="link-othernews" href="' + posturl + '" target ="_top">' + posttitle + '</a></h4></li>';
document.write(trtd);
}
if(i==3)
{
var trtd = '<li><a class="link-othernews" href="' + posturl + '" target ="_top">' + posttitle + '</a></h4></li>';
document.write(trtd);
}
if(i==4)
{
var trtd = '<li><a class="link-othernews" href="' + posturl + '" target ="_top">' + posttitle + '</a></h4></li>';
document.write(trtd);
}
if(i==5)
{
var trtd = '<li><a class="link-othernews" href="' + posturl + '" target ="_top">' + posttitle + '</a></h4></li></ul></div></div></div>';
document.write(trtd);
}




j++;
}
document.write('');
}



      //]]>
    </script>

- ĐẶT HTML NƠI BẠN MUỐN BÀI VIẾT HIỂN THỊ THEO KIỂU NÀY

<div class='khungerhay' style=''>
                   
                <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 = 6; //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/?orderby=published&amp;alt=json-in-script&amp;callback=erhay1' type='text/javascript'/>
                    </div>

OK. VẬY LÀ ĐÃ XONG MỘT KIỂU PHÂN LOẠI NỮA. 

Bạn đọc có thể để lại comment nếu gặp khó khăn. 

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