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

- Lần trước đây Anh Nhím Blog đã chia sẻ một mẫu Recent Post - Bài đăng gần đây, bây giờ Anh Nhím Blog sẽ tiếp tục hướng dẫn các bạn tạo một widget mà n1 hiển thị các bài đăng mới nhất trong một thể loại do bạn điều chỉnh. Widget Bài Đăng Gần đây này  là một biến thể của bài viết gần đây the nhãn mà mình đả chia sẽ

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

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>

HTML<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* CSS Recent Post by Label */
.anhnhimlabel1 ul,.anhnhimlabel2 ul{list-style:none;margin:0;padding:0}
.anhnhimlabel1 li,.anhnhimlabel2 li{margin:0;padding:0}
.anhnhimlabel1 .widget,.anhnhimlabel2 .widget{font-family:'Open Sans',sans-serif!important;margin:0;padding:0}
.anhnhimlabel1 .widget-content,.anhnhimlabel2 .widget-content{padding:0;margin:0;word-wrap:break-word;overflow:hidden}
.anhnhimlabel1 h2,.anhnhimlabel2 h2{position:relative;margin:0;padding:15px 0;font-size:13px;font-weight:400;border-bottom:1px solid #ddd}
.anhnhimlabel2 h2{margin:20px 0 0}
.data-title:before{content:'\f143';right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:400;margin:0 10px 0 0;color:#07ACEC}
.data-title{color:#07ACEC;border:1px solid #07ACEC;padding:3px 8px;border-radius:2px;margin-right:10px}
.anhnhimlabel1 .index,.anhnhimlabel2 .index{font-size:13px;font-weight:400}
.anhnhimlabel1 .index a,.anhnhimlabel2 .index a{color:#07ACEC;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6;color:#07ACEC;border-color:#07ACEC}
.anhnhimlabel1 .index a:hover,.anhnhimabel2 .index a:hover{background:#07ACEC;color:#fff;border-color:transparent}
.anhnhimlabel1 .index a:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-left:5px}
.anhnhimlabel2 .index a:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-left:6px}
.anhnhimlabel2 span.anhnhim_meta_comment a:hover{color:#07ACEC!important}
.anhnhimlabel2 ul.anhnhim_thumbs li a:hover,.anhnhimlabel2 ul.anhnhim_thumbs2 li a:hover{color:#07ACEC;text-decoration:none}
.anhnhim_left{margin:0;padding:0;border-right:1px solid #fff}
.anhnhim_left .cat_thumb{float:left;margin-right:10px!important}
.anhnhim_right{float:left;margin-top:-35px;padding:0}
ul.anhnhim_thumbs{margin:0;padding:0}
ul.anhnhim_thumbs li,ul.anhnhim_thumbs2{margin:0;padding:0}
ul.anhnhim_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:280px;height:200px}
ul.anhnhim_thumbs .cat_thumb img{height:auto;width:100%;transition:all .2s}
ul.anhnhim_thumbs .cat_thumb img:hover{opacity:.9}
ul.anhnhim_thumbs2 li{margin:0 0 10px;padding:0 0 10px;width:27%;overflow:hidden;min-height:60px;float:left;margin-right:10px!important;border-bottom:1px solid #e9e9e9}
ul.anhnhim_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0}
ul.anhnhim_thumbs2 .cat_thumb2{float:left;margin:0 10px 0 0;height:72px;overflow:hidden}
ul.anhnhim_thumbs2 .cat_thumb2 img{height:60px;transition:all .2s}
ul.anhnhim_thumbs2 .cat_thumb2 img:hover{opacity:.9}
span.anhnhim_title{font-family:'Open Sans',sans-serif;font-size:18px!important;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none;max-height:45px;overflow:hidden}
span.anhnhim_title2{font-size:14px!important;font-weight:400!important;line-height:1.4em;margin:0 0 3px;max-height:38px}
span.anhnhim_title a{color:#333}span.anhnhim_title a:hover{color:#07ACEC;text-decoration:none}
span.anhnhim_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0}
span.anhnhim_meta{display:block;font-family:'Open Sans',sans-serif;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase}
span.anhnhim_meta a{color:#aaa;display:inline-block}
span.anhnhim_meta_date,span.anhnhim_meta_comment,span.anhnhim_meta_more{display:inline-block;margin-right:10px}
span.anhnhim_meta_comment a:before{content:"\f0e6";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-right:5px}
span.anhnhim_meta_comment a:hover{color:#07ACEC!important}
span.anhnhim_meta_date:before{content:"\f133";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;padding-right:5px}
ul.anhnhim_thumbs2 li a:hover,ul.anhnhim_thumbs li a:hover{color:#07ACEC;text-decoration:none}
@media only screen and (max-width:768px){.tanggal i,.tags i{color:#ff8000!important}.anhnhim_right{width:100%;float:left;margin:0;padding:0}span.anhnhim_title2{max-height:33px!important}ul.anhnhim_thumbs2 li{border-bottom:0;width:58%;overflow:hidden;min-height:60px}.anhnhimlabel1 .widget-content,.anhnhimlabel2 .widget-content{margin-top:10px}span.anhnhim_summary,.anhnhim_left{display:none}span.anhnhim_title a{font-weight:700}span.anhnhim_title{margin:0 0 5px}ul.anhnhim_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}span.anhnhim_title2{font-size:18px;line-height:1.2em}}
@media only screen and (max-width:320px){ul.anhnhim_thumbs2 .cat_thumb2 img{width:80px;height:50px}.anhnhim_right{width:100%;float:left;margin:0;padding:0}ul.anhnhim_thumbs li{margin:0 0 10px;padding:0 0 10px}span.anhnhim_title2{font-size:18px;line-height:1.2em}}
@media screen and (max-width:260px){.anhnhim_right{width:100%;float:left;margin:0;padding:0}ul.anhnhim_thumbs li{margin:0 0 10px;padding:0 0 10px}span.anhnhim_title2{font-size:18px;line-height:1.2em}}
</style>
</b:if>
</b:if>

và

JS<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="anhnhim_left">'),document.write('<ul class="anhnhim_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="anhnhim_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="anhnhim_meta">'),1==showpostdate&&(v=v+'<span class="anhnhim_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="anhnhim_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="anhnhim_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="anhnhim_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="anhnhim_right">'),document.write('<ul class="anhnhim_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="anhnhim_title anhnhim_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="anhnhim_meta anhnhim_meta2">'),1==showpostdate2&&(v=v+'<span class="anhnhim_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="anhnhim_meta_comment anhnhim_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="anhnhim_meta_more anhnhim_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=9,showpostthumbnails=!0,showpostthumbnails2=!0,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=150,thumb_width=310,thumb_height=160,thumb_width2=100,thumb_height2=55,no_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1b6xz1q7kIff1rIsuAPKDuOHCAKXH4YRJhCUIqWGDmNa7VURHwo3IiSTCjAizZstuaAVyJRU_1XaZGNQLgCdMmWMUeP8W7SXzSasWf_vq5WHHjrM3HlkxSSwtmTkCTkjm_9_8cQVG8IM/s320/anhnhim_thumb.png",no_thumb2="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCyBviLDTgCgfoYnoLUL0U7wmVkeOvkMtCu3bC1HAvjoprI5UttCdk6Yuiybb4JkqgrLfSetIldjCkh83nRH-yGaam1hKUOI1zfQ5wtWuWdVSoWFSpot_hNV3ZpUaa64AuhWQFERj7gHk/s1600/anhnhimthumb_small.png";
</script>

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='anhnhimlabel1-wrapper'>
        <b:section class='anhnhimlabel1' id='anhnhimlabel1' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML80' locked='false' title='Tips Blogger' type='HTML'>
            <b:includable id='main'>
<h2><span class='data-title'><data:content/></span><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span></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='anhnhimlabel2-wrapper'>
        <b:section class='anhnhimlabel2' id='anhnhimlabel2' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML81' locked='false' title='Template' type='HTML'>
            <b:includable id='main'>
<h2><span class='data-title'><data:content/></span><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span></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

Lời Kết

Vậy là mình đã hướng dẫn các bạn tạo widget Bài Đăng Thường Gần Đây Theo Nhãn Version 2 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.