Hiển thị bài viết trên trang chủ theo Label cho Blogspot

Xin chào các bạn! Hôm nay mình có ghé qua blog Mộc Gin có thấy một bài viết hướng dẫn hiển thị bài viết trên trang chủ theo Lable cho blogspot. Mình có lấy về và sửa một chút theo ý thích bản thân, nên share cho các bạn cùng sử dụng.

Cũng như có một số bạn cần tới tiện ích này khi template chưa tích hợp sẵn.

Với tiện ích này bạn có thể show bài viết ra trang chủ theo một nhãn nhất định hoặc bài viết mới nhất.
Chúng ta bắt đầu tiến hành:

huhu

Bước 1: Để lấy ảnh Thumbnail và Tiêu đề bạn tìm đến thẻ </head> của blog và dán đoạn code sau lên trên.

<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/AVvXsEgDbsT16KYpFYuHODeutYiMcLlV_BJiJwZ_6RkR7YudHeg7mUIF8CTv3dlPKzccgJYz5FYNFyKokjVP27zbLiee5Wu8J2sASv-Ws3dZhaALrj2XoAGR24ESQOdHOkyWqzBjaY7bSJ2eiHgK/w300-c-h140/no-image.png";
 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: Đoạn code dưới đây bạn sao chép và dán nào nơi muốn hiển thị bài viết ra ngoài trang chủ:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='cat-box scroll-box topnewpost section' id='topnewpost'>
<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>
<div class='clear'/>
</b:if>

Bước 3: Để làm đẹp cho tiện ích ở trên bạn sao chép đoạn CSS sau và tìm tới thẻ ]]></b:skin> sau đó dán lên trên.
(Bạn có thể viết thêm CSS tuỳ theo ý thích riêng của mình từ đoạn CSS mẫu dưới đây)

#topnewpost {
margin-bottom:20px;
float:left;
width:100%;
background:#fff;
padding:15px 5px
}

.scroll-item {
width:31.333333333333%;
float:left;
margin:0 1%;
position:relative
}

.scroll-item a img {
height:100%;
max-height:180px;
width:100%
}

.scroll-item a {
color:#fff
}

.scroll-item header {
position:absolute;
padding:5px 10px;
bottom:0;
background:rgba(0,0,0,0.6);
width:100%
}

.scroll-item h3 {
font-size:14px
}

Bước 5: Chỉnh sửa code ở Bước 2 một chút:
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
Cuối cùng lưu mẫu lại và xem kết quả!
Chúc bạn thành công.

Download Here

Live Demo

Download

#Tag: blogcodemới nhất