Chào các bạn, mới gần đây mình có cập nhật hệ thống hiển thị bài viết theo nhãn cho blog của mình. Nó giúp cho mọi người có một cái nhìn tổng quan hơn về các mục chính trong blog hơn. Và bây giờ mình sẽ chia sẻ cách làm thế nào để
tạo bài viết theo nhãn cho blogger với các bạn nhé. Code gốc được mình lấy bên Idblanter chỉ edit và tối ưu lại cho đỡ phải dùng nhiều class, id và chỉnh màu, bố cục, responsive thôi.
Bài mới theo nhãn - Recent Posts By Label For Blogger
Bước 1: Truy cập Quản trị blogger - Chủ đề - Chỉnh sửa HTML
Bước 2: Thêm toàn bộ code dưới trước thẻ
</head>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
/* CSS Recent Post by Label */
.npclabel-wrapper{background:#fff; padding:0 10px;}
.npclabel ul{list-style:none;margin:0;padding:0}
.npclabel li{margin:0;padding:0}
.npclabel .widget{margin:0;padding:0;border-bottom:4px solid #e6e6e6}
.npclabel .widget-content{padding:0;margin:0;word-wrap:break-word;overflow:hidden}
.npclabel h2{position:relative;margin:0;padding:5px 0;font-size:13px;font-weight:400;margin-bottom:15px}
.data-title{color:#2b5cb9;border-bottom:2px solid #2b5cb9;padding:3px 5px;font-size: 15px;font-weight: 500;text-transform: capitalize}
.npclabel .index{font-size:15px;font-weight:400}
.npclabel .index a{padding:3px 5px;border-bottom:2px solid #2b5cb9;color:#2b5cb9;float:right;font-weight:500;transition:all 0.3s ease;}
.npclabel .index a:after{content:'\f101';font-family:fontawesome;visibility:hidden;opacity:0;transition:all 0.3s ease;position: absolute;
margin-top: 4px;right: -18px;}
.npclabel .index a:hover:after{opacity:1;visibility:visible;right:0}
.npclabel .index a:hover{padding-right:13px}
.npclabel span.npc_meta_comment a:hover{color:#2b5cb9!important}
.npclabel ul.npc_thumbs li a:hover,.npclabel ul.npc_thumbs2 li a:hover{color:#2b5cb9;text-decoration:none}
.npc_left{margin:0;padding:0;}
.npc_left .cat_thumb{float:left;margin-right:10px!important}
.npc_right{float:left;padding:0}
ul.npc_thumbs{margin:0;padding:0}
ul.npc_thumbs li,ul.npc_thumbs2{margin:0;padding:0}
ul.npc_thumbs .cat_thumb{position:relative;margin:0;padding:0;width:252px;height:145px}
ul.npc_thumbs .cat_thumb img{height:auto;width:100%;transition:all .2s}
ul.npc_thumbs .cat_thumb img:hover{opacity:.9}
ul.npc_thumbs2 li{margin:0 0 10px;padding:0 0 10px;width:27%;overflow:hidden;min-height:60px;float:left;margin-right:10px!important;}
ul.npc_thumbs2 .cat_thumb2{float:left;margin:0 10px 0 0;height:72px;overflow:hidden}
ul.npc_thumbs2 .cat_thumb2 img{height:60px;transition:all .2s}
ul.npc_thumbs2 .cat_thumb2 img:hover{opacity:.9}
span.npc_title{font-size:18px!important;font-weight:500;display:block;margin:0 0 10px;line-height:normal;text-transform:none;max-height:48px;overflow:hidden}
span.npc_title2{font-size:14px!important;font-weight:400!important;line-height:1.4em;margin:0 0 3px;max-height:38px}
span.npc_title a{color:#333}span.npc_title a:hover{color:#2b5cb9;text-decoration:none}
span.npc_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0}
span.npc_meta{display:block;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase}
span.npc_meta a{color:#aaa;display:inline-block}
span.npc_meta_date,span.npc_meta_comment,span.npc_meta_more{display:inline-block;margin-right:10px}
span.npc_meta_comment a:before{content:"\f0e6";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-right:5px}
span.npc_meta_comment a:hover{color:#2b5cb9!important}
span.npc_meta_date:before{content:"\f133";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-right:5px}
ul.npc_thumbs2 li a:hover,ul.npc_thumbs li a:hover{color:#2b5cb9;text-decoration:none}
@media screen and (min-width:1024px) and (max-width:1025px){span.npc_meta{display:none!important}ul.npc_thumbs2 li{width:21%!important}}
@media only screen and (max-width:768px){ul.npc_thumbs2 li{width:30%!important}.tanggal i,.tags i{color:#ff8000!important}.npc_right{width:100%;float:left;margin:0;padding:0}span.npc_title2{max-height:33px!important}ul.npc_thumbs2 li{border-bottom:0;width:58%;overflow:hidden;min-height:60px}.npclabel .widget-content{margin-top:10px}span.npc_summary,.npc_left{display:none}span.npc_title a{font-weight:500}span.npc_title{margin:0 0 5px}ul.npc_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}span.npc_title2{font-size:18px;line-height:1.2em}}
@media only screen and (max-width:640px){ul.npc_thumbs2 li{width:22%!important}}
@media only screen and (max-width:480px){ul.npc_thumbs2 li{width:49%!important}}
@media screen and (max-width:320px){ul.npc_thumbs2 li{width:60%!important}ul.npc_thumbs2 .cat_thumb2 img{width:80px;height:50px}.npc_right{width:100%;float:left;margin:0;padding:0}ul.npc_thumbs li{margin:0 0 10px;padding:0 0 10px}span.npc_title2{font-size:18px;line-height:1.2em}}
@media screen and (max-width:260px){.npc_right{width:100%;float:left;margin:0;padding:0}ul.npc_thumbs li{margin:0 0 10px;padding:0 0 10px}span.npc_title2{font-size:18px;line-height:1.2em}}
</style>
</b:if>
</b:if>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=0;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var u;try{u=r.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10),g=new Array;g[1]="Tháng 1",g[2]="Tháng 2",g[3]="Tháng 3",g[4]="Tháng 4",g[5]="Tháng 5",g[6]="Tháng 6",g[7]="Tháng 7",g[8]="Tháng 8",g[9]="Tháng 9",g[10]="Tháng 10",g[11]="Tháng 11",g[12]="Tháng 12",document.write('<span class="npc_left">'),document.write('<ul class="npc_thumbs">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+n+'"><div class="cat_thumb"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div></a>'),document.write('<span class="npc_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="npc_meta">'),1==showpostdate&&(v=v+'<span class="npc_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="npc_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="npc_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="npc_summary">'),"content"in r)var y=r.content.$t;else if("summary"in r)var y=r.summary.$t;else var y="";var k=/<\S[^>]*>/g;if(y=y.replace(k,""),1==showpostsummary)if(y.length<numchars)document.write(""),document.write(y),document.write("");else{document.write(""),y=y.substring(0,numchars);var $=y.lastIndexOf(" ");y=y.substring(0,$),document.write(y+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>"),document.write("</span>")}document.write('<span class="npc_right">'),document.write('<ul class="npc_thumbs2">');for(var e=1;e<numposts2;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=1;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var x;try{x=r.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),x=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+n+'"><div class="cat_thumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+x+'"/></div></a>'),document.write("<li>"),document.write('<span class="npc_title npc_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="npc_meta npc_meta2">'),1==showpostdate2&&(v=v+'<span class="npc_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="npc_meta_comment npc_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="npc_meta_more npc_meta_more2"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write("</li>")}document.write("</ul>"),document.write("</span>")}
//]]>
</script>
<script type='text/javascript'>
var numposts=1,numposts2=5,showpostthumbnails=!0,showpostthumbnails2=!0,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=50,thumb_width=310,thumb_height=160,thumb_width2=100,thumb_height2=55,no_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggiMHZR119I8bZQVZ18pQgH_C4060sP7xSWywwtYiThZyOQUlRsSL8aWzu5MS3ODKtqTalnYZPSB-Ju9RBcozhH9niaUQf_79CqIarY33ZedW9d5IL3UYUEdpivCVqRlm7vWG5eS7HsYo/s320/blanter_thumb.png",no_thumb2="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Mn32Iv5y2POXKIx_3bdw8bpby8RTXMknFtuvtVNLyciIN0Ge2xYajIbONIIMAqLxEPpBcUiz8O4AE8XQn0_dRr6P0Nt1EnEQWaaUknVHbdzzOWI7kEjCbakVFe9P76SvAMyfbTVOxlk/s1600/blanterthumb_small.png";
</script>
Bước 3: Thêm code hiển thị tại bất kì cho nào bạn thấy phù hợp (nằm trong cặp thẻ
<body>...</body>
, nếu muốn thêm vào vị trí như blog mình thì bạn tìm
<b:section class='main' id='main' showaddelement='no'>
và chèn code dưới trước đoạn vừa tìm được nhé)
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='npclabel-wrapper'>
<b:section class='npclabel' id='npclabel1' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML80' locked='false' title='Tiêu đề 1' type='HTML'>
<b:includable id='main'>
<h2><span class='data-title'><data:content/></span><span class='index'><a title='Xem thêm' href='/search/label/<data:content/>?&max-results=10'>Xem thêm</a></span></h2>
<div class='widget-content'>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=published&alt=json-in-script&callback=labelthumbs\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>
Bước 4: Lưu template và chuyển qua Bố cục. Tại đây bạn sẽ thấy có vài tiện ích HTML/Javascript vừa được thêm vào, hãy chỉnh sửa từng tiện ích bằng cách thêm Tiêu đề và Tên nhãn muốn hiển thị bài mới ví dụ như hình dưới:
Lưu ý:
Tên nhãn trong khung Nội dung phải viết đúng như tên nhãn trong blog bạn nhé tức sẽ phân biệt chữ hoa và chữ thường đấy.
Điền xong thì
Lưu tiện ích lại.
Để thêm các widget khác thì bạn thêm code như ở bước 3 và chỉnh khác
id phần
b:section đi là được nhé, ví dụ
npclabel1,
npclabel2...
Bonus
Phần này dành cho bạn nào đã
ẩn mục bài viết mới mặc định của blog đi rồi nhé (blog mình cũng bỏ rồi để tạo sự nhất quán ấy mà). Khi đó để hiển thị bài viết mới mà vẫn dùng style của bài theo nhãn này bạn sửa như sau:
Trong code widget định hiện bài mới chung chung ở bước 2, bạn tìm
script src=\"/feeds/posts/default/-/<data:content/>?orderby=published&và sửa lại thành
script src=\"/feeds/posts/default?orderby=published& là được nhé.
Kết luận
Trên đây, mình vừa hướng dẫn xong cho các bạn cách để tạo bài viết mới theo nhãn cho blog rồi đấy. Bạn hoàn toàn có thể tùy biến sao cho ra nhiều sản phẩm độc đáo hơn nữa nhé. Nếu có bất kì vấn đề gì hãy để lại bình luận dưới bài nha.
