Bài Đăng Thường Gần Đây Theo Nhãn Cho Blogspot

Thường thì widget bài đăng gần đây xuất hiện rất nhiều trên các Templates dành cho Blogspot, bởi nó là phần ko thiếu của blog về tạp chí, bài báo bởi độ phong phú đa dạng của blog dạng đó. Nay Anh Nhím Blog sẽ hướng dẫn các bạn mang Recent post của Template Tạp chí lên blog cá nhân của bạn. Ở đây Recent Post này sẽ có dạng layout hiên thị bài đẹp hơn các dạng trước mà mình đã chia sẽ.

Mục lục:

• Mục Đích
• Thực Hiện
• Lời Kết

Mục Đích

• Tạo bài đăng gần đây đẹp cho blogspot
• Tạo sự phong phú, đa dạng cho blogspot
• Hỗ trợ hiện thị bài đăng theo nhãn giúp người xem biết nhãn nào chứa bài viết nào
• ....

Thực Hiện

1. Các bạn đăng nhập Blogger >> Mẫu >> Chỉnh sửa HTML,

2. Sau đó các bạn chèn 2 đoạn code sau vào trước thẻ đóng </head>

CSS<b:if cond="data:blog.pageType != &quot;item&quot;">
<b:if cond="data:blog.pageType != &quot;static_page&quot;">
<style type="text/css">
/* Recent Post by Label */
.newanhnhimlabel1 ul,.newanhnhimlabel2 ul{list-style:none;margin:0;padding:0}
.newanhnhimlabel1 li,.newanhnhimlabel2 li{margin:0;padding:0;}
.newanhnhimlabel1 .widget,.newanhnhimlabel2 .widget{margin:0;padding:0}
.newanhnhimlabel1 .widget-content,.newanhnhimlabel2 .widget-content{border:1px solid #e9e9e9;padding:20px;margin:0;word-wrap:break-word;overflow:hidden}
.newanhnhimlabel1 h2,.newanhnhimlabel2 h2,.newanhnhimlabel3 h2{position:relative;margin:0;padding:15px 20px;font-size:16px;font-weight:700;text-transform:uppercase;color:#333;border:1px solid #e9e9e9;border-bottom:0}
.newanhnhimlabel2 h2,.newanhnhimlabel3 h2{margin:20px 0 0 0;}
.newanhnhimlabel1 h2:before,.newanhnhimlabel2 h2:before,.newanhnhimlabel3 h2:before{content:&#39;\f108&#39;;right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#ff675c;}
.newanhnhimlabel2 h2:before{content:&#39;\f0c3&#39;;}.newanhnhimlabel3 h2:before{content:&#39;\f143&#39;;}
.newanhnhimlabel1 .index,.newanhnhimlabel2 .index{font-size:10px;float:right;font-weight:400;}
.newanhnhimlabel1 .index a,.newanhnhimlabel2 .index a{display:flex;color:#039be5;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6}
.newanhnhimlabel2 .index a{color:#ef6c00;border-color:#ffa726}
.newanhnhimlabel1 .index a:hover{background:#039be5;color:#fff;border-color:transparent}
.newanhnhimlabel2 .index a:hover{background:#ef6c00;color:#fff;border-color:transparent}
.newanhnhimlabel1 .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px}
.newanhnhimlabel2 .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px}
.newanhnhimlabel2 span.newanhnhim_meta_comment a:hover{color:#38761d!important}
.newanhnhimlabel2 ul.newanhnhim_thumbs li a:hover,.newanhnhimlabel2 ul.newanhnhim_thumbs2 li a:hover{color:#ff675c;text-decoration:none}
.newanhnhim_left{width:280px;width:45.7%;float:left;margin:0;padding:0 20px 0 0;border-right:1px solid #e9e9e9}
.newanhnhim_right{width:250px;width:47.5%;float:right;margin:0;padding:0}
ul.newanhnhim_thumbs{margin:0;padding:0}
ul.newanhnhim_thumbs li,ul.newanhnhim_thumbs2{margin:0;padding:0}
ul.newanhnhim_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:280px;height:200px}
ul.newanhnhim_thumbs .cat_thumb img{height:auto;width:100%;transition:all 0.2s}
ul.newanhnhim_thumbs .cat_thumb img:hover{opacity:.9;}
ul.newanhnhim_thumbs2 li{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #e9e9e9}
ul.newanhnhim_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0}
ul.newanhnhim_thumbs2 .cat_thumb2{float:left;margin:0 10px 0 0;width:62px;height:72px;overflow:hidden}
ul.newanhnhim_thumbs2 .cat_thumb2 img{height:auto;transition:all .2s}
ul.newanhnhim_thumbs2 .cat_thumb2 img:hover{opacity:.9;}
span.newanhnhim_title{font-family:&#39;Roboto Condensed&#39;,sans-serif;font-size:20px;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none}
span.newanhnhim_title2{font-size:16px;line-height:1.4em;margin:0 0 3px}
span.newanhnhim_title a{color:#333}
span.newanhnhim_title a:hover{color:#ff675c;text-decoration:none}
span.newanhnhim_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0 0}
span.newanhnhim_meta{display:block;font-family:&#39;Roboto Condensed&#39;,sans-serif;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase}
span.newanhnhim_meta a{color:#aaa;display:inline-block}
span.newanhnhim_meta_date,span.newanhnhim_meta_comment,span.newanhnhim_meta_more{display:inline-block;margin-right:10px}
span.newanhnhim_meta_comment a:before{content:&quot;\f0e6&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
span.newanhnhim_meta_comment a:hover{color:#ff675c!important}
span.newanhnhim_meta_date:before{content:&quot;\f133&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
ul.newanhnhim_thumbs2 li a:hover,ul.newanhnhim_thumbs li a:hover{color:#ff675c;text-decoration:none}
@media screen and (max-width:1024px) {
.newanhnhimlabel1 .widget-content, .newanhnhimlabel2 .widget-content {padding:20px 25px;}
.newanhnhim_left {width:50%;float:left;margin:0;padding:0;border-right:none}
.newanhnhim_right {width:46%;float:right;margin:0;padding:0;}
ul.newanhnhim_thumbs .cat_thumb {width:100%;height:auto;}
ul.newanhnhim_thumbs .cat_thumb img {width:100%;height:auto;}
ul.newanhnhim_thumbs li {margin:0;padding:0;}
span.newanhnhim_title2 {font-size:20px;line-height:1.2em;}
span.newanhnhim_summary {font-size:14px;}}
@media only screen and (max-width:768px){
.newanhnhimlabel1 .widget-content,.newanhnhimlabel2 .widget-content{padding:10px 20px}
.newanhnhim_right{width:100%;float:left;margin:0;padding:0}
ul.newanhnhim_thumbs2 li{border-bottom:0}
span.newanhnhim_summary,.newanhnhim_left{display:none}
span.newanhnhim_title{margin:0 0 5px}
ul.newanhnhim_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}
span.newanhnhim_title2{font-size:18px;line-height:1.2em}}
@media only screen and (max-width:480px){
#newanhnhimlabel1-wrapper,#newanhnhimlabel2-wrapper{display:none}}
@media only screen and (max-width:320px){
.newanhnhimlabel1 .widget-content,.newanhnhimlabel2 .widget-content{padding:10px 20px}
.newanhnhimlabel1 h2,.newanhnhimlabel2 h2{padding:10px 20px 1px 20px}
.newanhnhim_right{width:100%;float:left;margin:0;padding:0}
ul.newanhnhim_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.newanhnhim_title2{font-size:18px;line-height:1.2em}}
@media screen and (max-width:260px) {
.newanhnhimlabel1 .widget-content,.newanhnhimlabel2 .widget-content{padding:10px}
.newanhnhimlabel1 h2,.newanhnhimlabel2 h2{padding:10px 10px 1px 10px}
.newanhnhim_right{width:100%;float:left;margin:0;padding:0}
ul.newanhnhim_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.newanhnhim_title2{font-size:18px;line-height:1.2em}}
</style>
</b:if>
</b:if>

JS<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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]="January",g[2]="February",g[3]="March",g[4]="April",g[5]="May",g[6]="June",g[7]="July",g[8]="August",g[9]="September",g[10]="October",g[11]="November",g[12]="December",document.write('<span class="newanhnhim_left">'),document.write('<ul class="newanhnhim_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="newanhnhim_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="newanhnhim_meta">'),1==showpostdate&&(v=v+'<span class="newanhnhim_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="newanhnhim_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="newanhnhim_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="newanhnhim_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="newanhnhim_right">'),document.write('<ul class="newanhnhim_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="newanhnhim_title newanhnhim_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="newanhnhim_meta newanhnhim_meta2">'),1==showpostdate2&&(v=v+'<span class="newanhnhim_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="newanhnhim_meta_comment newanhnhim_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="newanhnhim_meta_more newanhnhim_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=6,showpostthumbnails=!0,showpostthumbnails2=!1,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=150,thumb_width=280,thumb_height=200,thumb_width2=62,thumb_height2=62,no_thumb=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMNYAavD3G5UhI8K731i6SlQzGnIYtfI9o6ycK0q9xjnCFtQTJsq5xegwIG10VMy5sag8vlS21yfEOcQd7n2TfVRTxFu3YQxKqNuMa6YUay86iwGH6onCI9uQl6GJQwee1m5gIdHc-Bjnj/s1600/newanhnhim_thumb.png&quot;,no_thumb2=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXCanmP19lgNILZwiuBN-HS1E40NcnnMg-LqeuceyUFpf6GOo0klTqgMKTwClXE2ghJh7ST5PMNRUmgPhU1W8SDrHjfoJOQg3S5qHIaffX9HCGrYooEC0JTqyMIxwml9ZaeZjxzJS7bwfG/s1600/newanhnhimthumb_small.png&quot;;
</script>
</b:if>
</b:if>

3. Sau đó các bạn nhìn lên cái hàng menu trên khung chứa toàn bộ code có chữ Chuyển hướng đến tiện ích >> Blog1



4. Sau đó bạn nhìn lên ngay trên dòng đó sẽ tìm thấy dòng
<b:section class='main' id='main' maxwidgets='3' showaddelement='yes'>

5. Lúc này các bạn nhìn qua bên trái chú ý dòng trên nó nằm ở số mấy rồi nhấn vào số đó là mấy cái dòng cuối sẽ tự thu gọn lại chỉ còn như hình

6. Lúc này các bạn chép đoạn code sau và sau dòng đó

HTML<b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div id='newanhnhimlabel1-wrapper'>
        <b:section class='newanhnhimlabel1' id='newanhnhimlabel1' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML80' locked='false' title='Template' type='HTML'>
            <b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
          </b:widget>
        </b:section>
      </div>
      <div id='newanhnhimlabel2-wrapper'>
        <b:section class='newanhnhimlabel2' id='newanhnhimlabel2' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML81' locked='false' title='Tips Blogger' type='HTML'>
            <b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
          </b:widget>
        </b:section>
      </div>
</b:if>

Sau khi chèn vào nó sẽ như hình

7. Sau đó Nhấn Lưu Mẫu
8. Vào Blogger >> Bố cục >> Lúc này các bạn sẽ thấy sau phần bài đăng chính sẽ có thêm hai tiện ích Template Và Tips Blogger

9. Sau đó các bạn nhấn vào Chỉnh sửa, rồi nhập nhãn bạn muốn hiện thị vào

Chú ý khi nhập nhãn xong thì bên ngoài sẽ hiện tên tiêu đề là các nhãn bạn nhập chứ ko phải hiện cái chữ Template và Tips Blogger 

10. Nhấn Lưu >> Lưu Sắp Xếp
11. Xem thành quả.

Demo
click to view

Tại trang demo kéo xuống cuối trang là thấy

Lời Kết

Vậy là mình đã hướng dẫn các bạn tao5 Bài Đăng Thường Gần Đây Theo Nhãn Cho Blogspot , nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.