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.
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVy96R2Uz0dU-NyJbFjknlp9eJzkb8qAFRDz-QlAZ4CfhRQkU837WlzXz16Tf-M4-w57hr1irRip2P21xYBBokzJOOyJJUGr0tLggZ5lqaD9Yt6UNESV4niePjvkgGVjFEz99EfSR6S6ur/) 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/AVvXsEgdOGXKeBVQ1wyyDkySpTtjne5fT6F7AtCH7cL4V-SmSjc8SBHz2DvsGV0DGBe4nnBy0ZR6mgYMD6KUjSXG42gCZ2kDDX8CxeIoeNLF3qaSilAw4yHsLgxgNY7s3-Ak0-oz1EN94b1t6Bw/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>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdOGXKeBVQ1wyyDkySpTtjne5fT6F7AtCH7cL4V-SmSjc8SBHz2DvsGV0DGBe4nnBy0ZR6mgYMD6KUjSXG42gCZ2kDDX8CxeIoeNLF3qaSilAw4yHsLgxgNY7s3-Ak0-oz1EN94b1t6Bw/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>
<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('<span class="index"><a href="/search/label/<data:content/>?&max-results=8">Đọc thêm »</a></span>');
document.write('<h1><a href="/search/label/<data:content/>?max-results=8"><data:title/></a></h1>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts6+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");
</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('<span class="index"><a href="/search/label/<data:content/>?&max-results=8">Đọc thêm »</a></span>');
document.write('<h1><a href="/search/label/<data:content/>?max-results=8"><data:title/></a></h1>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts6+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");
</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('<span class="index"><a href="/search/label/<data:content/>?&max-results=8">Đọc thêm »</a></span>');
document.write('<h1><a href="/search/label/<data:content/>?max-results=8"><data:title/></a></h1>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts6+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");
</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('<span class="index"><a href="/search/label/<data:content/>?&max-results=8">Đọc thêm »</a></span>');
document.write('<h1><a href="/search/label/<data:content/>?max-results=8"><data:title/></a></h1>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts6+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");
</script>
</div>
</b:includable>
</b:widget>
</b:section>
<b:widget id='HTML51' locked='false' title='TEST1' type='HTML'>
<b:includable id='main'>
<div class='featuredPost2'>
<script>
document.write('<span class="index"><a href="/search/label/<data:content/>?&max-results=8">Đọc thêm »</a></span>');
document.write('<h1><a href="/search/label/<data:content/>?max-results=8"><data:title/></a></h1>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts6+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");
</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('<span class="index"><a href="/search/label/<data:content/>?&max-results=8">Đọc thêm »</a></span>');
document.write('<h1><a href="/search/label/<data:content/>?max-results=8"><data:title/></a></h1>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts6+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");
</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('<span class="index"><a href="/search/label/<data:content/>?&max-results=8">Đọc thêm »</a></span>');
document.write('<h1><a href="/search/label/<data:content/>?max-results=8"><data:title/></a></h1>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts6+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");
</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('<span class="index"><a href="/search/label/<data:content/>?&max-results=8">Đọc thêm »</a></span>');
document.write('<h1><a href="/search/label/<data:content/>?max-results=8"><data:title/></a></h1>');
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts6+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");
</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
Chúc các bạn thành công
Tham quan du ngoạn từ Nam chí Bắc:
An Giang || Bà Rịa - Vũng Tàu || Bắc Giang || Bắc Kạn || Bạc Liêu || Bắc Ninh || Bến Tre || Bình Dương || Bình Định || Bình Phước || Bình Thuận || Cà Mau || Cao Bằng || Cần Thơ || Đà Nẵng || Đắk Lắk || Đắk Nông || Điện Biên || Đồng Nai || Đồng Tháp || Hà Giang || Hà Nam || Hà Tĩnh || Hải Dương || Hậu Giang || Hòa Bình || Hưng Yên || Khánh Hòa || Kiên Giang || Kon Tum || Lai Châu || Lâm Đồng || Lạng Sơn || Lào Cai || Long An || Về Miền Tây || Nam Định || Nghệ An || Ninh Bình || Ninh Thuận || Phú Thọ || Quảng Bình || Quảng Nam || Quảng Ngãi || Quảng Ninh || Quảng Trị || Sóc Trăng || Sơn La || Về Tây Nguyên || Tây Ninh || Thái Bình || Thái Nguyên || Thanh Hóa || Thừa Thiên Huế || Thành phố Hồ Chí Minh || Thủ Đô Hà Nội || Tiền Giang || Trà Vinh || Tuyên Quang || Vĩnh Long || Vĩnh Phúc || Yên Bái
|| || || || || || || || || || || || || || || || || || || || || || || || || || || || || || || || || ||
Bộ sưu tập ảnh hot:
Album nghệ thuật Dương Quốc Định Full || Albums Quang Linh || Ảnh chỉ có Việt Nam || Ảnh cưới Collection || Ảnh đẹp Phương Tây || Ảnh đẹp Victoria’s Sceret tổng hợp || Ảnh độc cười ra nước mắt || Ảnh giải trí Châu Á || Ảnh giải trí Hàn Quốc || Ảnh giải trí Nhật Bản || Ảnh giải trí Thái Lan || Ảnh giải trí Trung Quốc || Ảnh nền PC || Ảnh nghệ thuật 3D || Ảnh Nude || Hoa đẹp bốn mùa nên xem || Hoa hậu thế giới Collection || Hoa hậu Việt Nam Collection || Hoa Phong Lan || Thư viện ảnh || Thời sự qua ảnh || Tranh đẹp của họa sĩ nổi tiếng
0 nhận xét | Viết lời bình