Thứ Hai, 5 tháng 12, 2016

Share CODE Bài Viết Liên Quan Đơn Giản - Gọn Nhẹ cho Blogger Blogspot

CODE Bài Viết Liên Quan (Related Posts) được rất nhiều trang web sử dụng phổ biến bởi nó khái quát được lượng nội dung trong cùng chuyên mục cũng như liên quan đến những thứ mà khách quan tâm trên Blogspot của các bạn. Bài viết này sẽ hướng dẫn các bạn tạo một CODE Bài Viết Liên Quan giống như trên codeseo.net đặc biệt CODE khá gọn và linh hoạt. Không có Thumbnail nên rất nhẹ cho người dùng

CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển) 
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML) 
3. Đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích) 
4. Chèn script 

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

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

<!-- Widget bài viết liên quan (1) -->
<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://cdn3.iconfinder.com/data/icons/christmas-8/249/Christmas_star-16.png) no-repeat 0 0;
    margin: 0;
    padding: 0 0 1px 26px;
    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:

<!-- Widget bài viết liên quan (2) -->
<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'> <!-- Màu chữ label -->
<b:loop values='data:post.labels' var='label'>
<data:label.name/> <!--Dòng code hiện label kế bên bài viết liên quan-->
<b:if cond='data:label.isLast != "true"'>
, <!--Dấu phẩy ngăn cách các label -->
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=8"' type='text/javascript'/>
</b:if>
</b:loop>
</font>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>
-
max-results=8 // Số bài viết liên quan hiển thị

Lưu ý: Đối với những blog có tiện ích đọc thêm (Read more...) thì việc bạn đặt code trên trước hay sau code của link Readmore đều không quan trọng (do 2 tiện ích này không thể xuất hiện chung trên một trang), quan trọng là các code này phải được đặt sau dòng <data:post.body/>

Bước 3: Save template.

Chúc các bạn thành công. Thắc mắc vui lòng comment