Tạo bài viết liên quan trong Blogspot

Trong Blogspot, khi xem chi tiết 1 bài viết thì bên dưới bài viết sẽ xuất hiện một số bài viết liên quan nhằm đề đề xuất thu hút người đọc tiếp tục đọc bài viết khác (đây là 1 mẹo trong SEO nhằm duy trì thời gian để người đọc không thoát website của ta). Sau đây là một đoạn code đơn giản giúp bạn tạo thêm chức năng này.

Đây chỉ là hướng dẫn cơ bản nhất, có gì bạn viết bình luận bên dưới để mình hướng dẫn chi tiết hơn đối với blogspot của bạn. Nếu bạn muốn thay đổi kiểu hiển thị bài viết liên quan (như là hiển thị hình ảnh,...) thì bạn chỉ cần chỉnh sửa CSS và hàm printRelatedLabels trong code Javascript.

Vào Template -> Edit HTML, chọn nơi mà bạn cần hiển thị các bài viết liên quan, sau đó thêm vào các dòng code sau :

1. Code CSS : (dòng đầu tiên là gán CSS chỉ có hiệu lực trong trang chi tiết - trang item)

<b:if cond='data:blog.pageType == "item"'>
    <style type='text/css'>
        #related-posts {
            margin: 15px 5px;
        }
        
        #related-posts h2 {
            font-size: 27px;
            font-weight: normal;
            color: #fff;
            text-shadow: 1px 0px 2px #888;
            margin-bottom: 0.75em;
        }
        
        #related-posts a {
            font-size: 13px;
            color: #888;
            text-transform: capitalize;
        }
        
        #related-posts a:hover {
            text-decoration: none;
            color: #555;
        }
        
        #related-posts ul {
            list-style-type: none;
            margin: 0 0 0px 0;
            padding: 0px;
            text-decoration: none;
            color: #000000;
        }
        
        #related-posts ul {
            list-style-type: none;
            background: #f9f9f9;
            border-left: 5px solid #f2f2f2;
        }
        
        #related-posts li {
            padding: 10px;
            line-height: 1.4;
            border-bottom: 1px dotted #E2E2E2;
        }
        
        #related-posts li:hover {
            background: #F4F4F4;
        }
    </style>
</b:if>

2. Code Javascript:

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(currenturl) {
    for (var i = 0; i < relatedUrls.length; i++) {
        if (relatedUrls[i] == currenturl) {
            relatedUrls.splice(i, 1);
            relatedTitles.splice(i, 1)
        }
    }
    var r = Math.floor((relatedTitles.length - 1) * Math.random());
    var i = 0;
    if (relatedTitles.length > 1) {
        document.write('<h2>' + relatedpoststitle + '</h2>')
    }
    document.write('<ul>');
    while (i < relatedTitles.length && i < 20 && i < maxresults) {
        document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
        if (r < relatedTitles.length - 1) {
            r++
        } else {
            r = 0
        }
        i++
    }
    document.write('</ul>');
    relatedUrls.splice(0, relatedUrls.length);
    relatedTitles.splice(0, relatedTitles.length);
}

3. Code trong Edit HTML: (chú ý: code này chỉ có hiệu lực trong Template của Blogspot)

<b:if cond='data:blog.pageType == "item"'>
    <div id='related-posts'>
        <b:loop values='data:post.labels' var='label'>
            <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&amp;callback=related_results_labels&amp;max-results=6"' type='text/javascript' />
            </b:if>
        </b:loop>
        <script type='text/javascript'>
            var maxresults = 5;
            removeRelatedDuplicates();
            printRelatedLabels( & quot; < data: post.url / > & quot;);
        </script>
    </div>
</b:if>