[Blogspot] - Bài viết liên quan đơn giản cho blogspot - GOOGLE-VINA

Cách tạo bài viết liên quan cho blogger đơn giản gọn nhẹ

Để giúp blog của bạn thêm phần phong phú cũng như giúp người đọc dễ dàng tìm kiếm những chủ đề liên quan đến bài viết họ đang đọc là điều rất cần thiết. Hôm nay mình xin giới thiếu đến các bạn tiện ích bài viết liên quan đến cùng 1 nhãn nhưng không có hình ảnh ( dành cho những bạn thích sự đơn giản ) nhẹ nhàng và dễ làm. Thủ thuật này dùng đến CSS giúp cho phần hiển thị bài viết liên quan dưới cùng mỗi bài viết nhìn đơn giản mà lại rất bắt.

Bai viet lien quan blogspot

CÁCH THỰC HIỆN

Đăng nhập Blogger chọn mẫu => chỉnh sưả HTML ( edit HTML )

Bước 1: Tìm thẻ đóng </head>

- Thêm vào trước nó đoạn code sau:

<style>
/*Khung chính của bài viết liên quan*/
#related-posts {
float:left;
min-width: 100%;
margin: 30px 5px 30px 0;
font: 11px Tahoma;
}
#related-posts .widget {
List-style-type: none;
margin: 5px 0 5px 0;
padding: 0;
}
#related-posts .widget h2, #related-posts h2 {
color: #940f04;
font-size: 20px;
font-weight: normal;
margin: 5px 7px 0;
padding: 0 0 5px;
}
/*Màu link của bài viết liên quan*/
#related-posts a {
color: #318686;
font-size: 13px;
text-decoration: none;
}
/*Màu link khi rê chuột vào*/
#related-posts a:hover {
color: #C4436A;
text-decoration: underline;
}
#related-posts ul {
border: medium none;
margin: 10px;
padding: 0;
}
#related-posts ul li {
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja0qIEhqLd4wqv4k5-bZ5627kPWQR3Ta_aOOXAI7097cLNiwtf9GMyIffwkESzGyFJv3lnqNoWT49Lnbq3INwyWugRxf5TQ1NwBRVw_XEHuO0GO3jb-G0TBc3HGY1wGUZGtC4-wDOwLE72/) no-repeat 0 0;
margin: 0;
padding: 0 0 1px 16px;
margin-bottom: 5px;
line-height: 2em;
border-bottom:1px dotted #cccccc; /*Gạch đích dưới mỗi link bài viết liên quan*/
}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
}
//]]>
</script>

Bước 2: Tìm dòng <data:post.body/>

- Thêm vào sau nó đoạn code sau:

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<div style='border-top:#AAAE95 1px dashed; margin: 0 50px 0 50px; padding-top:30px;'/>
<font face='Arial' size='3'><b>Bài viết liên quan: </b></font>
<font color='#FF0000'> 
<b:loop values='data:post.labels' var='label'>
<data:label.name/> 
<b:if cond='data:label.isLast != "true"'>
, 
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=8"' type='text/javascript'/>
</b:if>
</b:loop>
</font>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

Chỉnh sửa lại đoạn code in màu đỏ : max-results=8 // Số bài viết liên quan mà bạn muốn hiển thị

Và cuối cùng là bạn lưu lại mẫu rồi xem kết quả của mình ra sao nhé.

Nguồn: duongtroc.com