Hiển thị bài viết theo nhãn ngoài trang chủ Blog

Bài này mình cùng giới thiệu đến các bạn một cách khá đơn giản để đưa các bài viết ra ngoài trang chủ theo nhãn.
Mẫu này được mình trích ra từ template Johny Kampret được chia sẻ từ mastemplate.com. Mẫu đã được chỉnh lại về giao diện và thêm một số hiệu ứng nhỏ nhằm làm đẹp hơn.

Bước 1: Các bạn vào Chỉnh sửa HTML trong trang quản trị blog, Tìm đến thẻ đóng ]]</b:skin> và copy đoạn code phía dưới vào trước thẻ đóng.

.featuredPost2 h1{font-size:15px;font-family:Arial;font-weight:bold;text-shadow:1px 1px 1px #fff;padding:10px 10px;color: #464546;letter-spacing:-1px;border-top:1px solid #fff;border-left:1px solid #fff;border-right:1px solid #fff;border-bottom:1px solid #c6c2c1;background:#E3E3E3 url(http://lh6.ggpht.com/_pt7i0nbIOCY/TKaGCrdlU1I/AAAAAAAAC2w/WRdSIMpiTiY/bgh3_thumb%5B1%5D.jpg) repeat-x left bottom;text-transform:none;}
.featuredPost2 h1 a{color:#464546}
.featuredPost2 h1 a:hover{color:#0077ff}
.featuredPost2{font-size:13px;font-family:Arial;color:#464546;-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);-moz-box-shadow:0 0 7px rgba(0,0,0,.7);box-shadow:0 0 7px rgba(0,0,0,.7);margin-bottom:15px;padding-bottom:8px;float:left;line-height:1.3em;}
.featuredPost2 ul{border:1px solid #fff}
.featuredPost2 .entry-title{font-size:13px;font-family:Arial;font-weight:bold;text-transform:none;color:#0077ff;line-height:15px;margin-bottom:5px}
.featuredPost2 .entry-title a{color:#0077ff}
.featuredPost2 .entry-title a:hover{color:#464546;text-decoration:underline}
.featuredPost2 ul li{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border-bottom: 1px dashed #b2b1b4;margin:0 8px;padding:8px 0}
.featuredPost2 img{background:#fff;-webkit-box-shadow:0 0 5px rgba(0,0,0,.7);-moz-box-shadow:0 0 5px rgba(0,0,0,.7);box-shadow:0 0 5px rgba(0,0,0,.7);-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;transition:all 0.2s ease;;padding:3px;float:left;display:block;margin-right:10px}
.featuredPost2 img:hover{-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}
.index{box-shadow:0 1px rgba(255,255,255,.2) inset;background:#0077ff;float:right;font:12px Tahoma;color:#fff;display:block;margin:8px 5px 0;padding:3px 10px;-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;}
.index a,.index a:visited{color:#fff;}
.index:hover{box-shadow:0 1px rgba(255,255,255,.2) inset;background:#555;text-decoration:none}

Bước 2: Các bạn chèn đoạn code phía dưới vào trước thẻ đóng </head>

<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe-8ypBxAr4itlsuPUUkRoOmA2CexokW1zJST84tmzVXBFTHoz4MuXUjUdrRTRH2S1-FPImjDX476oF_QP4JoqQQ24CQ1ARDfjMDlfQ3073V5gg3lIjf67V39zso3Iq9_EqTyijmBMYt0/s1600/no+image.jpg";showRandomImg=true;aBold=true;summaryPost=110;summaryTitle=20;numposts6=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}function showrecentposts6(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();document.write('<ul>');for(var i=0;i<numposts6;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;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!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd=' <li class="featuredPost2"><a href="'+posturl+'"><img width="62" height="62" class="alignleft" src="'+img[i]+'"/></a><div class="entry-title"><a href="'+posturl+'">'+posttitle+'</a></div>'+removeHtmlTag(postcontent,summaryPost)+'...</li>';document.write(trtd);j++}document.write('</ul>')}
//]]>
</script>

Bước 3 : Các bạn tìm đến widget 'Blog1' như đoạn mã phía dưới

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>

Và thêm ngay dưới nó đoạn mã sau :

<b:section class='book' id='dxh1' preferred='yes'>
<b:widget id='HTML51' locked='false' title='TEST1' type='HTML'>
<b:includable id='main'>
<div class='featuredPost2'>
<script>
document.write(&#39;&lt;span class=&quot;index&quot;&gt;&lt;a href=&quot;/search/label/<data:content/>?&amp;max-results=8&quot;&gt;Đọc thêm &#187;&lt;/a&gt;&lt;/span&gt;&#39;);
document.write(&#39;&lt;h1&gt;&lt;a href=&quot;/search/label/<data:content/>?max-results=8&quot;&gt;<data:title/>&lt;/a&gt;&lt;/h1&gt;&#39;);
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts6+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts6\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML52' locked='false' title='TEST3' type='HTML'>
<b:includable id='main'>
<div class='featuredPost2'>
<script>
document.write(&#39;&lt;span class=&quot;index&quot;&gt;&lt;a href=&quot;/search/label/<data:content/>?&amp;max-results=8&quot;&gt;Đọc thêm &#187;&lt;/a&gt;&lt;/span&gt;&#39;);
document.write(&#39;&lt;h1&gt;&lt;a href=&quot;/search/label/<data:content/>?max-results=8&quot;&gt;<data:title/>&lt;/a&gt;&lt;/h1&gt;&#39;);
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts6+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts6\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
</b:widget>
</b:section>
<b:section class='book' id='dxh2' preferred='yes'>
<b:widget id='HTML53' locked='false' title='TEST2' type='HTML'>
<b:includable id='main'>
<div class='featuredPost2'>
<script>
document.write(&#39;&lt;span class=&quot;index&quot;&gt;&lt;a href=&quot;/search/label/<data:content/>?&amp;max-results=8&quot;&gt;Đọc thêm &#187;&lt;/a&gt;&lt;/span&gt;&#39;);
document.write(&#39;&lt;h1&gt;&lt;a href=&quot;/search/label/<data:content/>?max-results=8&quot;&gt;<data:title/>&lt;/a&gt;&lt;/h1&gt;&#39;);
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts6+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts6\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML54' locked='false' title='TEST4' type='HTML'>
<b:includable id='main'>
<div class='featuredPost2'>
<script>
document.write(&#39;&lt;span class=&quot;index&quot;&gt;&lt;a href=&quot;/search/label/<data:content/>?&amp;max-results=8&quot;&gt;Đọc thêm &#187;&lt;/a&gt;&lt;/span&gt;&#39;);
document.write(&#39;&lt;h1&gt;&lt;a href=&quot;/search/label/<data:content/>?max-results=8&quot;&gt;<data:title/>&lt;/a&gt;&lt;/h1&gt;&#39;);
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts6+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts6\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
</b:widget>
</b:section>

Các bạn thay những phần được tô đỏ là địa chỉ các label mà các bạn muốn hiển thị bài đăng
Bước 4: Bạn vào phần Bố cục → Lúc này trong template đã hiển thị thêm 4 widget với tên lần lượt là: TEST1, TEST2, TEST3, TEST4 nằm ngay bên dưới "Bài đăng trên Blog" .

Bạn nhấp vào "Chỉnh sửa" và thêm vào phần nội dung của widget tên nhãn mà bạn muốn hiển thị.

Và thay đổi tên nhãn bạn muốn hiển thị.
Chúc các bạn thành công