√ Cách tạo bài viết liên quan trong Blogspot

Cách tạo bài viết liên quan trong Blogspot

Nency

2016-11-03

Chào các bạn! Bài viết này mong các bạn có những bài viết được gắn liền với nhau. Tạo ra cho người đọc một nội dung liên quan, dẵn dặt trong cuối bài đọc. Thì các bạn đã biết, làm sao các bài viết liên quan có thể được liệt kê..

Bài viết liên quan không chỉ làm cho bài viết của chúng ta đẹp hơn, chuyên nghiệp hơn. Nó còn giúp cho chúng ta điều hướng người dùng tốt hơn, giúp họ có thể dễ dàng tìm được những bài viết có cùng nội dung hay chủ đề được nói đến.

Cách tạo bài viết liên quan cho Blogspot

Những gì các bạn làm liên quan đến code thì mình khuyên các bạn nên sao lưu lại phòng trường hợp bị hỏng dẫn tới lỗi.

Bước 1: Các bạn copy đoạn code sau và chèn vào trước thẻ </head> . Đây là đoạn Script dùng để lấy ra danh sách các bài viết liên quan từ những bài có cùng chung label với bài viết bạn đang xem.

<script type='text/javascript'>
//<![CDATA[
var titles = new Array();
var titlesNum = 0;
var urls = new Array();
var time = new Array();
 
function related_results_labels(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 (d.link[a].rel == "alternate") {
                urls[titlesNum] = d.link[a].href;
                time[titlesNum] = d.published.$t;
                titlesNum++;
                break
            }
        }
    }
}
 
function removeRelatedDuplicates() {
    var b = new Array(0);
    var c = new Array(0);
    e = new Array(0);
    for (var a = 0; a < urls.length; a++) {
        if (!contains(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] = time[a]
        }
    }
    titles = c;
    urls = b;
    time = e
}
 
function contains(b, d) {
    for (var c = 0; c < b.length; c++) {
        if (b[c] == d) {
            return true
        }
    }
    return false
}
 
function printRelatedLabels(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);
            time.splice(b, 1)
        }
    }
    var c = Math.floor((titles.length - 1) * Math.random());
    var b = 0;
    document.write("<ul>");
    if (titles.length == 0) {
        document.write("<li>Không có bài viết liên quan → </li>")
    } else {
        while (b < titles.length && b < 20 && b < maxresults) {
            if (y != -1) {
                urls[c] = urls[c] + '?m=0'
            }
            document.write('<li><a href="' + urls[c] + '" title="' + time[c].substring(8, 10) + "/" + time[c].substring(5, 7) + "/" + time[c].substring(0, 4) + '">' + titles[c] + "</a></li>");
            if (c < titles.length - 1) {
                c++
            } else {
                c = 0
            }
            b++
        }
    }
    document.write("</ul>");
    urls.splice(0, urls.length);
    titles.splice(0, titles.length)
};
//]]>
</script>

Bước 2: Các bạn tiếp tục copy đoạn code dưới đây và chèn vào vị trí muốn hiển thị. Bởi đây là đoạn code dùng để show ra danh sách mà đoạn code ở bước thứ nhất đã lấy ra. Thường thì chèn nó vào ngay dưới nội dung của bài viết

Bây giờ tìm đến thẻ <data:post.body/> và dán đoạn code sau dưới thẻ đỏ đó.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='bai-viet-lien-quan'>
        <h4>
            Bài viết liên quan:
        </h4>
        <b:loop values='data:post.labels' var='label'>
            <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
        </b:loop>
        <script type='text/javascript'>
            var maxresults=5;
            removeRelatedDuplicates();
            printRelatedLabels(&quot;<data:post.url/>&quot;);
        </script>
    </div>
</b:if>

Hình sau:

Mình giải thích thêm var maxresults=5; là số lượng bài viết cần hiển thị và hiển thị là 5, các bạn có thể thay đổi giá trị này phụ thuộc vào bạn!

Bạn có thể đọc thêm Cách viết bài trong Blogspot chuẩn Seo

Bước 3: Sau khi xác định được vị trí cần đặt cho bài viết liên quan, bây giờ đến phần css phần này chỉnh sửa giao diện cho nó.

#bai-viet-lien-quan {
    float: left;
    width: 100%;
    margin: 20px 0;
    border-left: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
}
#bai-viet-lien-quan h4 {
    font-size: 20px;
    background: #e9e9e9;
    padding: 10px 5px;
    color: #8BC34A;
} 
#bai-viet-lien-quan ul {
    padding: 0;
    margin: 0;
} 
#bai-viet-lien-quan ul li {
    padding: 5px;
    border-bottom: 1px solid #e6e6e6;
}

Phần CSS này các bạn copy và dán vào trước thẻ </style> nhé!

P/s: Cũng tùy thuộc vào template nhé các bạn, vì mỗi template nó xây dựng mỗi khác, có nhiều template hỗ trợ rồi nhưng vẫn còn nhiều chưa hỗ trợ, các bạn có thể xem Template Blogspot Seo 2016 hỗ trợ SEO rất tốt, cảm ơn các bạn

ads