Bài viết hiển thị theo nhãn - Phần 1

Tiếp nối chủ đề Hot "Hiển thị bài đăng theo nhãn" hôm nay mình cùng giới thiệu đến bạn một phong cách mới khá đơn giản nhưng vẫn đạt được tính thẩm mỹ.

Mẫu này được mình trích ra từ template Johny Kampret được chia sẻ từ mastemplate.com

Mẫu đã được mình 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.

Demo

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

#dxh1{width:338px;float:left;padding:5px}
#dxh2{width:338px;float:right;padding:5px}
.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw_MuRtbg-Byw8QrofGN7ngJRYHnv2xNE-wV8B2RLUpF857cGtJtgd2hlGvBrkmxui5EtH64LWUl8TXVk9ZRc3eIKh5FmnvYYOecpMy7sIrH8AR30NYwBbg5usmnjkzguXfwqkuTuh9woD/) 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: Thêm đoạn mã dưới đây vào trước thẻ </head> trong template của bạn.

<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitXslEm3UwuM6E45PqETv0k3FqJRQwlrANA8vCwDBA0uzQLmEBkmeIvA06vpxalsHfAUTw86qfrgHUhILmObZMy74RzLFWBOUkboH75kSQYbNVrucGEYh0-44R7SseLT230JWfSMHJYMk/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: Tìm kiếm đoạn mã (không Mở rộng Mẫu Tiện ích)

<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 vào ngay sau 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>

Saver lại template.

Lưu ý: Nếu muốn các widget mới tạo hiển thị ở những trang bất kỳ bạn tham khảo thêm bài viết.

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ị.

Trong ví dụ tên nhãn của mình là "test1"

Bấm "Lưu" và quay lại trang chủ tận hưởng!