Hiển thị bài đăng theo Label trên trang chủ cho Blogspot/Blogger

POSTED ON 19/01/2017

Hướng dẫn hiển thị bài đăng theo Label trên trang chủ cho Blogspot/Blogger.

à bài viết đầu tiên trong chuyên mục Thủ thuật Blogspot của năm 2017. Hôm nay, dạo một vòng các group quen thuộc thì có thấy một bạn đăng hỏi cách hiển thị bài viết theo Label trên trang chủ như thế nào?

Cũng đúng lúc đang bí ý tưởng viết bài, nên là đành viết bài chia sẻ luôn vậy! Với thủ thuật này, bạn sẽ Show ra danh sách các bài viết mới nhất của một Label mà bạn muốn.

Các bước thực hiện

Bước 1: Copy đoạn code sau và thêm vào trước thẻ </head>. Đoạn code dưới đây được dùng để lấy ra danh sách các bài viết mới gồm Thumbnail và Tiêu đề (Title).

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <script type='text/javascript'>
 //<![CDATA[ 
 imgr = new Array();
 imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjysGBijzc7VqIKm3TFh8ix4MqNC_U2ys5BetPPlunTbo6XCVH2GqlVFqW2v8Q8bLf0UlowqRlduHkpDOKDtHYl17Z4bCwB4uQu6Pr28Fy9l5nC_2z5WUUs4ZDKLHfgX-7UzHViz_KPeiH0/w300-c-h140/no-image.png";
 numposts1 = 5;
 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 topnewpost(json) {
 j = showRandomImg ? Math.floor((imgr.length + 1) * Math.random()) : 0;
 img = new Array;
 if (numposts1 <= json.feed.entry.length) maxpost = numposts1;
 else maxpost = json.feed.entry.length;
 for (var i = 0; i < maxpost; i++) {
 var entry = json.feed.entry[i];
 var tag = entry.category[0].term;
 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 = '<div class="scroll-item secondary-post col-post"><a class="hover_play_small" href="' + posturl + '"><img src="' + img[i] + '"></img></a><header><h3><a href="' + posturl + '">' + posttitle + "</a></h3></header></div>";
 document.write(trtd);
 j++
 }
 };
 //]]>
 </script>
</b:if>

Bước 2: Các bạn copy đoạn code dưới đây và dán vào nơi muốn hiển thị nhé! Bước này là để hiển thị ra danh sách các bài viết mà chúng ta đã lấy ra ở bước trên.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:section class='cat-box scroll-box topnewpost section' id='topnewpost' showaddelement='yes'>
 <b:widget id='HTML999' locked='false' title='' type='HTML' version='1' visible='true'>
 <b:includable class='cat-box-content' id='main'>
 <div class='widget-content'>
 <script>
 document.write(&quot;&lt;script src=\&quot;/feeds/posts/default<data:content/>?max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;callback=topnewpost\&quot;&gt;&lt;\/script&gt;&quot;);
 </script>
 </div>
 </b:includable>
 </b:widget>
 </b:section>
 <div class='clear'/>
</b:if>

Bước 3: Các bạn copy đoạn CSS dưới đây và dán vào trước thẻ ]]></b:skin> nhé! Đoạn CSS này giúp làm đẹp và hiển thị danh sách theo ý muốn của mình. Các bạn có thể tự viết CSS lấy hoặc dùng bản của mình cũng được nhé!

#topnewpost {
 margin-bottom: 20px;
 float: left;
 width: 100%
}
.scroll-item {
 width: 32.3333333%;
 float: left;
 margin-right: 1.5%;
 position: relative;
}
.scroll-item a {
 color: #fff;
}
.scroll-item header {
 position: absolute;
 padding: 5px 10px;
 bottom: 4px;
 background: rgba(2,2,2,0.72);
 width: 100%;
}
.scroll-item h3 {
 font-size: 17px;
}

Sau khi dán xong, các bạn nhớ Lưu Template lại nhé!

Bước 4: Sau khi Lưu Template rồi, các bạn chuyển tới menu quản lý Bố cục của blog. Tại đây, bạn sẽ thấy có thêm một Section mới như sau:

Bước 5: Các bạn click vào Chỉnh sửa. Bây giờ, nếu các bạn muốn hiển thị các bài mới nhất của blog thì điền là /. Còn nếu muốn hiển thị theo Label nào đó thì điền là /-/Tên Label.

Tổng kết

Như vậy là chúng ta đã cùng nhau hoàn thành việc hiển thị bài viết theo Label trên trang chủ rồi. Mong rằng, với bài viết này sẽ có ích đối với bạn. Trong bài viết khác, mình sẽ hướng dẫn các bạn thêm với các style khác nhau nữa. Theo dõi blog để không bỏ lỡ các bài viết mới nhất nhé!

DEMO: http://thietketemplateblogspota.blogspot.com/

Mocgin.com

.