Hướng dẫn phân loại bài viết blogspot cho kiểu danh sách

Tại chuyên mục bài viết mới của mình là một dạng list (sử dụng ul, li). Trong hướng dẫn này mình sẽ hướng dẫn bạn cách để tạo một phân loại bài viết có style như vậy.

Để tạo một phân loại như vậy. Các bước thực hiện sẽ như sau :

Bước 1 : Mở chế độ chỉnh sửa HTML (Mẫu -> Chỉnh sửa HTML)

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

.label_thumb
{
border:1px solid #f2f2f2;
}
.label_thumb:hover
{
background-color: #ffffff;
opacity:0.9;
}
ul.label_with_thumbs li:first-child:before
{
content:"(Mới nhất)   " !important;
color:Red;
font-weight:bold;
}
.label_with_thumbs li a
{
padding-top:10px !important;
}
.label_with_thumbs li
{
display:inline;
float:left;
padding-right:5px;
padding-top:10px;
padding:3px 5px 4px 0px;
color:white;
width:250px;
text-align:left;
}
.label_with_thumbs li:hover
{
background:#f4faff;
display:inline;
float:left;
padding-right:5px;
padding-top:5px;
padding:3px 5px 4px 0px;
border-bottom:1px solid #e0e0e0;
color:white;
width:250px;
text-align:left;
}
.the-a
{
width:170px;
height:33px;
overflow:hidden;
}
.the-a a
{
font-weight:bold !important;
}
.label_with_thumbs a
{
font-size:13px;
font-weight:bold;
font:inherit
}

Bước 3 : Thêm Javascript sau trước </head>

<script type='text/javascript'>
      //<![CDATA[
      function labelthumbs(json) {
          document.write('<ul class="label_with_thumbs">'); for (var i = 0; i < numposts; i++) {
              var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) {
                  if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') { var commenttext = entry.link[k].title; var commenturl = entry.link[k].href; }
                  if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; }
              } var thumburl; try { thumburl = entry.media$thumbnail.url; } catch (error)
{ s = entry.content.$t; 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 != "")) { thumburl = d; } else thumburl = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonRdtunHa0dUg9MDFQIM-pRVjav8u0B4pJoSCl2Hr4WE59Z_z0mHiUJR4izBL3RWxMuiizkXVIpUUTP7J_TnvAQQXpl_2FIOhXZzLZvYiPR9pd7Gv0TOQRlxbFwQAl64EP8Ke04cGCWQa/'; }
              var postdate = entry.published.$t; var cdyear = postdate.substring(0, 4); var cdmonth = postdate.substring(5, 7); var cdday = postdate.substring(8, 10); var monthnames = new Array(); monthnames[1] = "Jan"; monthnames[2] = "Feb"; monthnames[3] = "Mar"; monthnames[4] = "Apr"; monthnames[5] = "May"; monthnames[6] = "Jun"; monthnames[7] = "Jul"; monthnames[8] = "Aug"; monthnames[9] = "Sep"; monthnames[10] = "Oct"; monthnames[11] = "Nov"; monthnames[12] = "Dec"; document.write('<li class="clearfix">'); if (showpostthumbnails == true)
                  document.write('<a href="' + posturl + '" target ="_top"><img class="label_thumb2" src="' + thumburl + '"/></a>'); document.write('<a href="' + posturl + '" target ="_top">' + posttitle + '</a><br>'); if ("content" in entry) { var postcontent = entry.content.$t; }
              else
                  if ("summary" in entry) { var postcontent = entry.summary.$t; }
                  else var postcontent = ""; var re = /<\S[^>]*>/g; postcontent = postcontent.replace(re, ""); if (showpostsummary == true) {
                  if (postcontent.length < numchars) { document.write(''); document.write(postcontent); document.write(''); }
                  else { document.write(''); postcontent = postcontent.substring(0, numchars); var quoteEnd = postcontent.lastIndexOf(" "); postcontent = postcontent.substring(0, quoteEnd); document.write(postcontent + '...'); document.write(''); }
              }
              var towrite = ''; var flag = 0; document.write('<br>'); if (showpostdate == true) { towrite = towrite + monthnames[parseInt(cdmonth, 10)] + '-' + cdday + ' - ' + cdyear; flag = 1; }
              if (showcommentnum == true) {
                  if (flag == 1) { towrite = towrite + ' | '; }
                  if (commenttext == '1 Comments') commenttext = '1 Comment'; if (commenttext == '0 Comments') commenttext = 'No Comments'; commenttext = '<a style="color:#dd8620 !important; font-size:9px !important" href="' + commenturl + '" target ="_top">' + commenttext + '</a>'; towrite = towrite + commenttext; flag = 1; ;
              }
              if (displaymore == true)
              { if (flag == 1) towrite = towrite + ' | '; towrite = towrite + '<a href="' + posturl + '" class="url" target ="_top">More »</a>'; flag = 1; ; }
              document.write(towrite); document.write('</li>'); if (displayseparator == true)
                  if (i != (numposts - 1))
                      document.write('');
          } document.write('</ul>');
      }
//]]>
    </script>

Bước 4 : Đặt phân loại này nơi bạn muốn hiển thị bài viết như vậy (trong body)

<script type='text/javascript'>                var numposts = 5; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = true; var showpostdate = false; var showpostsummary = false; var numchars = 80;</script>
          <script src='/feeds/posts/default/?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs' type='text/javascript'/></script>

(Chúc bạn thực hiện thành công các thao tác trong hướng dẫn này)

Vui lòng ghi rõ nguồn Erhay khi bạn phát hành thông tin từ trang này. Xin cảm ơn.