Thêm mục bài đăng liên quan vào Blogspot

Hôm nay mình sẽ hướng dẫn các bạn thêm mục bài viết liên quan cho Blogspot của mình. Sau đây là hình minh họa:

Sladar Gai demo bài viết liên quan trong blogspot

Bài viết liên quan như của mình nhé

Đầu tiên các bạn dán code này vào sau thẻ ]]></b:skin>:

#relatedPosts{float:left;margin:30px 0;width:640px}

#relatedPosts h2{margin-bottom:20px;padding-bottom:5px;border-bottom:solid 3px #3b5998}
#relatedPosts h2 span{padding:8px 10px;background:#3b5998;color:#fff}

#relatedPosts ul{margin:0;padding:0;list-style-type:none}
#relatedPosts ul li{padding:10px 0;border-bottom:dashed 1px #ccc;}
#relatedPosts ul li:last-child{border-bottom:0}

#relatedPosts h3{margin-bottom:8px}
#relatedPosts h3 a{margin:0;font:18px Time new roman;color: #3b5998;font-weight:600}
#relatedPosts h3 a:hover{color:#3b5998}
#relatedPosts img{float:left;border:1px solid #BBB;margin-right:10px;width:86px;height:80px;background:#FFF;padding:3px}

Dán như này nhé

Sau đó các bạn dán đoạn mã sau vào thẻ <data:post.body/> bên trong thẻ <b:includable id='post' var='post'>. Nhớ là đặt code sau đây vào phía sau nó nhé:
Lưu ý là có hai đoạn <data:post.body/> đấy! Một ở bên ngoài thẻ <b:includable id='post' var='post'> cái thứ hai là ở trong.
<b:if cond='data:blog.pageType == "item"'>
<div style='clear:both' />
<div id='relatedPosts'>
<script type='text/javascript'>
var ry = '<h2><span>Bài viết liên quan</span></h2>';
rn = '<h2>Không có Bài viết liên quan</h2>';
rcomment = 'Nhận xét';
rdisable = 'Tắt Nhận xét';
commentYN = 'yes';
</script>
<script type='text/javascript'>
//<![CDATA[
var dw = '';
titles = new Array();
titlesNum = 0;
urls = new Array();
timeR = new Array();
thumb = new Array();
commentsNum = new Array();
comments = new Array();

function relatedPost(c) {
for (var b = 0; b < c.feed.entry.length; b++) {
var d = c.feed.entry[b];
titles[titlesNum] = d.title.$t;
for (var a = 0; a < d.link.length; a++) {
if ('thr$total' in d) {
commentsNum[titlesNum] = d.thr$total.$t + ' ' + rcomment
} else {
commentsNum[titlesNum] = rdisable
};
if (d.link[a].rel == "alternate") {
urls[titlesNum] = d.link[a].href;
timeR[titlesNum] = d.published.$t;
if ('media$thumbnail' in d) {
thumb[titlesNum] = d.media$thumbnail.url
} else {
thumb[titlesNum] = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHzCniBCS8bKZZtn6W2rSf-UsO98uSmY_T94OsANHncka_RUIt1ZzHX3WoDHAtJYk7GY4pLvhJhgYdrZZYD9fNej0iXG07vsPo5KO3XnYAsxw2TPNMuXOuXH37KbItlSy22EVrfySacwU/s1600/no-image.PNG'
};
titlesNum++;
break
}
}
}
}

function delRelatedDuplicates() {
var b = new Array(0);
c = new Array(0);
e = new Array(0);
f = new Array(0);
g = new Array(0);
for (var a = 0; a < urls.length; a++) {
if (!containsBox(b, urls[a])) {
b.length += 1;
b[b.length - 1] = urls[a];
c.length += 1;
c[c.length - 1] = titles[a];
e.length += 1;
e[e.length - 1] = timeR[a];
f.length += 1;
f[f.length - 1] = thumb[a];
g.length += 1;
g[g.length - 1] = commentsNum[a]
}
}
urls = b;
titles = c;
timeR = e;
thumb = f;
commentsNum = g
}

function containsBox(b, d) {
for (var c = 0; c < b.length; c++) {
if (b[c] == d) {
return true
}
}
return false
}

function displayRelatedLabels(a) {
var y = a.indexOf('?m=0');
if (y != -1) {
a = a.replace(/\?m=0/g, '')
}
for (var b = 0; b < urls.length; b++) {
if (urls[b] == a) {
urls.splice(b, 1);
titles.splice(b, 1);
timeR.splice(b, 1);
thumb.splice(b, 1);
commentsNum.splice(b, 1)
}
}
var c = Math.floor((titles.length - 1) * Math.random());
var b = 0;
if (titles.length == 0) {
dw += rn
} else {
dw += ry;
dw += '<ul>';
while (b < titles.length && b < 20 && b < maxresults) {
if (y != -1) {
urls[c] = urls[c] + '?m=0'
}
if (commentYN == 'yes') {
comments[c] = ' - ' + commentsNum[c]
} else {
comments[c] = ''
};
dw += '<li><img alt="' + titles[c] + '" src="' + thumb[c] + '"/><div><h3><a href="' + urls[c] + '" rel="nofollow">' + titles[c] + '</a></h3><span>' + timeR[c].substring(8, 10) + '/' + timeR[c].substring(5, 7) + '/' + timeR[c].substring(0, 4) + comments[c] + '</span></div><div style="clear:both"></div></li>';
if (c < titles.length - 1) {
c++
} else {
c = 0
}
b++
}
dw += '</ul>'
};
urls.splice(0, urls.length);
titles.splice(0, titles.length);
document.getElementById('relatedPosts').innerHTML = dw
};
//]]>
</script>

<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relatedPost"' type='text/javascript' />
</b:loop>
<script type='text/javascript'>
var maxresults = 6;
delRelatedDuplicates();
displayRelatedLabels('<data:post.url/>');
</script>
</div>
<div style='clear:both' />
</b:if>


Sau đó bạn lưu và xem lại thành quả nhé.
Nếu không thích mẫu, bạn có thể sửa lại màu sắc và kích thước trong phần đã thêm trước thẻ ]]></b:skin>
Chúc các bạn thành công!

Nguồn: Thư pháp Thanh Phong | Thư pháp Việt

Thêm mục bài đăng liên quan vào Blogspot

Đăng nhận xét