Tạo recent bài viết cho blogspot theo 2 kiểu default và label

Hello các bạn hôm nay quay lại với chuyên mục thủ thuật blogspot. Trong bài viết ngày hôm nay tôi xin chia sẻ với các bạn code để chúng ta tạo recent post ( bài viết gần nhất ) của blogspot theo cả 2 kiểu là mặc định và theo từng nhãn như hình minh họa bên dưới.

Recent bài viết cho blogspot theo 2 kiểu default và label 

Các bạn vui lòng thực hiện theo các bước mà tôi hướng dẫn như bên dưới nhé

Bước 1: Đầu tiên chúng ta cần tạo một Widget

1. Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
2. Tìm một vị trí đẹp đề đặt widget và copy đoạn code bên dưới vào

<b:if cond='data:view.isHomepage'>
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<div class='container'>
 <div class='row'>
<div class='col-xs-12'>
<b:section id='laslide'/>
   </div>
</div></div>
</b:if> </b:if> 

Chú ý: Tôi sử dụng 2 thẻ điều kiện là chỉ hiển thị trên trang chủ và không hiển thị trên mobile và các class sử dụng tiện ích hệ thống lưới có sẵn trong bootstrap. Click save và sau đó quay lại phần Bố cục lúc này bạn sẽ thấy có một  Widget với tên là slide.

Bước 2: Thêm tiện ích - HTML & Javascript
Bước 3: copy toàn bộ đoạn code bên dưới dán vào

  <div id="longanit-seo" class="longanit-seo">
<h2><a href="https://www.longanit.com/"><i class="fa fa-bullhorn"></i> BÀI VIẾT MỚI NHẤT </a></h2>
<style>
a{text-decoration:none}
.blue{display:none}
.longanit-seo h2{background:#0073aa;color:#fff;line-height:1.6em;margin:0 0 10px;padding:4px 10px;font-weight:bold;}
.longanit-seo ul{list-style:none;margin:0;padding:0}
.longanit-seo li{text-indent:0;background:url(https://4.bp.blogspot.com/-TVFMWMC-lZw/UasMPl5QstI/AAAAAAAADVw/Th-PSA_b3SI/s1600/tag_blue.gif) no-repeat 0 7px;line-height:1.5em;margin:0;padding:2px 0 2px 15px;}
.longanit-seo h2 a:link, .longanit-seo h2 a:visited {color:#fff;}
#laslide{padding: 5px;border-bottom: 5px solid #337ab7;    margin-bottom: 20px;background: #fff;border-radius: 4px;box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);overflow: hidden;transition: all ease-in-out 125ms;    border-right: 3px solid #f1f1f1;}
.featured-post {
max-width: 1170px;
margin: auto;
font-family: Roboto
}
#featured-posts-section{
overflow: hidden;
background: white;border:1px;
}
.post-label, .post-labels {display: none !important;}
.featured-post a{font-size:1em;color:#fff}
.main-post.featured-post a{margin:0;font-size:15px}
.featured-post .col-post{float:left;position:relative;overflow:hidden;margin:0 20px 0 0}
.featured-post .secondary-post{ float: right;width:23%;margin:3px; }
.featured-post .secondary-post:nth-child(2) {width:23%;}
.featured-post .main-post{width:51%;padding:0}
.featured-post span{font-family: Roboto; background-color:rgba(0,0,0,0.7);padding:5px 6px;color:#fff;text-transform:uppercase;font-size:10px;font-style:normal;top:10px;left:10px;z-index:2;font-weight:500;position:absolute}
.featured-post img{height:100%;transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out}
.featured-post .main-post img{height:350px;width:100%;object-fit:cover}
.featured-post .secondary-post img{height:170px;object-fit:cover;width:100%}
.featured-post header{position:absolute;bottom:0;left:0;padding:20px;
background: rgba(0,0,0,0);
background: -moz-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.59) 59%,rgba(0,0,0,1) 100%);
background: -webkit-gradient(left top,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(59%,rgba(0,0,0,0.59)),color-stop(100%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.59) 59%,rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.59) 59%,rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,0.59) 59%,rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0.59) 59%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',endColorstr='#000000',GradientType=0);
width: 100%;
padding: 10px 15px;}
.featured-post h4{font-size:14px;font-family:Roboto;font-weight:500}
@media screen and (max-width:768px) {
h1.post-title.entry-title a, h2.post-title.entry-title a {display:inline-block;margin:15px 0;}
#featured-posts-section{display:none}}
</style>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(e,t){for(var s=e.split("<"),r=0;r<s.length;r++)-1!=s[r].indexOf(">")&&(s[r]=s[r].substring(s[r].indexOf(">")+1,s[r].length));return s=s.join(""),s=s.substring(0,t-1)}function sliderposts(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,numposts1<=e.feed.entry.length?maxpost=numposts1:maxpost=e.feed.entry.length;for(var t=0;t<maxpost;t++){var r,i,n=e.feed.entry[t],l=n.category[0].term,o=n.title.$t;if(t==e.feed.entry.length)break;for(var m=0;m<n.link.length;m++)if("alternate"==n.link[m].rel){i=n.link[m].href;break}for(var m=0;m<n.link.length;m++)if("replies"==n.link[m].rel&&"text/html"==n.link[m].type){r=n.link[m].title.split(" ")[0];break}if("content"in n)var g=n.content.$t;else if("summary"in n)var g=n.summary.$t;else var g="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[t]=imgr[j],s=g,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[t]=d);for(var h=[1,2,3,4,5,6,7,8,9,10,11,12],p=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],f=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<h.length;u++)if(parseInt(f)==h[u]){f=p[u];break}if(0==t){var v='<div class="main-post col-post"><a href="'+i+'"><span class="blue">'+l+'</span><img src="'+img[t]+'" height="350" width="640" alt=""></img></a><header><h3 class="entry-title"><a href="'+i+'" title="">'+o+"</a></h3></header></div>";document.write(v)}else{var v='<div class="secondary-post col-post" style="margin-right:0"><span class="blue">'+l+'</span><a class="hover_play_small" href="'+i+'"><img src="'+img[t]+'" height="100" width="220"></img></a><header><h4><a href="'+i+'">'+o+"</a></h4></header></div>";document.write(v)}j++}}imgr=new Array,imgr[0]="http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif",showRandomImg=!0,aBold=!0,summaryPost=150,summaryTitle=10,numposts1=10,featured_numposts="5";
//]]>
</script>
<div class="ct-wrapper" id="featured-posts-section">
<div class="featured-post padding clearfix">
<script type="text/javaScript">
document.write("<script src=\"/feeds/posts/default?max-results="+featured_numposts+"&orderby=published&alt=json-in-script&callback=sliderposts\"><\/script>");
</script>
</div>
</div></div>

Bước 4: Nhấn save và bắt đầu xem kết quả

Kết luận: Như vậy với cách trên tôi đã hướng dẫn các bạn cách tạo bài viết mới nhất với Style tiêu đề và hình ảnh dạng Thumb. Dựa vào code trên chúng ta sẽ cải tiến nó một chút để nó hiển thị theo từng nhãn quy định bạn chỉ cần sửa đoạn code mà tôi to màu đỏ đậm bên trên thành như sau:

 /feeds/posts/default/-/tên nhãn

Ví dụ trong blog của tôi muốn hiển thị nhãn SEO ra ngoài thì code nó sẽ như thế này:

/feeds/posts/default/-/SEO

Chúc các bạn thành công!

Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.