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

Nếu nói đến Blogspot/Blogger thì hầu như bạn nào làm dịch vụ seo cũng biết về nó rất nhiều loại blog để chúng ta xây dựng làm vệ tinh, làm website chính để Seo nhưng, biết đến nó thì đơn giản để khắc phục và sửa lỗi của nó theo ý mình là là một việc khác. Vậy sau đây mình chia sẻ cách hiển thị bài đăng theo Label trên trang chủ cho Blogspot/Blogger 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.

Tiến hành các bước làm như sau:

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] = “http://1.bp.blogspot.com/-7vDs5hMaDho/U268E2ecF4I/AAAAAAAADY8/RBHVTTuJrxc/w300-h140-c/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: 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:

hien-thi-anh-blogccc

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.

Chúc các bạn thành công….!!!!

admin 18 Tháng Ba, 2017 , ,
Liên hệ