Hướng dẫn tạo bài viết liên quan cho Blogspot

Hướng dẫn tạo bài viết liên quan cho Blogspot.

Bài viết liên quan là gì?

Bài viết liên quan là danh sách các bài viết được liệt kê ra mà có nội dung tương tự hoặc liên quan tới bài viết bạn đang xem theo Category, Tag hay tên bài viết. Ngoài ra, bài viết liên quan còn có tên gọi khác trong tiếng anh là Related Posts mà chúng ta thường thấy.

Như các bạn cũng thấy rõ, 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.

demo bai viet lien quan cho blogspot

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

OK, và bây giờ chúng ta sẽ cùng nhau thực hiện thủ thuật này nhé!

Lưu ý: Hãy backup lại Template trước khi thực hiện bất kỳ một thủ thuật nào để đề phòng trường hợp làm bị hỏng dẫn đến lỗi nhé! Đây là một điều tất yếu đấy 😀

Bước 1: Các bạn copy đoạn code sau và chèn vào trước </head> nhé! Đâ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. Ví dụ như mình sẽ chèn nó vào ngay dưới nội dung của bài viết. Thì giờ mình sẽ tìm đến thẻ <data:post.body/> và dán nó và dưới thẻ này.

Có thể trong Template của bạn sẽ có nhiều thẻ <data:post.body/> nên hãy thử từng cái một nhé.

chen code bai viet lien quan

<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>

Lưu ý: Các bạn thay đổi giá trị var maxresults=5; trong đoạn code trên cho phù hợp nhé!

Bước 3: Sau khi đã xác định được vị trí và chèn code hoàn thiện. Bây giờ, chúng ta sẽ cùng nhau làm cho nó đẹp hơn và phù hợp với Template mà bạn đang dùng nữa thôi.

Và dưới đây là đoạn code mà mình đang sử dụng. Nếu như bạn thích hoặc ngại ngồi viết lại CSS thì có thể dùng nó luôn cũng được nhé!

#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;
}

Tổng kết

Đây là một trong rất nhiều phong cách hiển thị danh sách bài viết liên quan. Trong bài viết về Bài viết liên quan cho Blogspot tiếp theo, mình sẽ hướng dẫn các bạn thêm bài viết liên quan kèm theo cả Thumbnail cho nó nữa nhé!

Hướng dẫn tạo bài viết liên quan cho Blogspot
4.68 / 25 votes

Ads quantri@mocgin.com

Có thể bạn thích

Nhận tin mới qua Email

  • Cập nhật tin tức hoàn toàn miễn phí qua Email
  • Đảm bảo an toàn thông tin của bạn
  • Nhận quà hàng tháng - Tri ân độc giả

Gửi bình luận

  • Không sử dụng từ khóa trong khung Name
  • Chèn code theo mẫu <pre>Your Code</pre>

32 Comments

  1. Phan Quang Hùng - 10 Bình luận 18/08/2016
    • Mộc -
      Admin
      18/08/2016
    • Hải Anh - 8 Bình luận 15/11/2016
      • Mộc -
        Admin
        15/11/2016
  2. Phong - 1 Bình luận 20/08/2016
    • Mộc -
      Admin
      20/08/2016
  3. sonct - 7 Bình luận 23/08/2016
  4. Thái Jerry - 10 Bình luận 23/08/2016
    • Mộc -
      Admin
      23/08/2016
  5. Thắng Đẹp Trai - 7 Bình luận 24/08/2016
    • Mộc -
      Admin
      28/08/2016
  6. vanguyen - 13 Bình luận 31/08/2016
    • Mộc -
      Admin
      31/08/2016
  7. Quý Mai - 9 Bình luận 14/09/2016
    • Mộc -
      Admin
      30/09/2016
      • Quý Mai - 9 Bình luận 02/10/2016
        • Mộc -
          Admin
          05/10/2016
          • Quý Mai - 9 Bình luận 05/10/2016
            • Mộc -
              Admin
              05/10/2016
  8. Hoàng Tuyến - 7 Bình luận 09/10/2016
    • Mộc -
      Admin
      09/10/2016
  9. Nam Quang - 1 Bình luận 15/10/2016
    • Mộc -
      Admin
      15/10/2016
  10. Đặng Việt Thạo - 50 Bình luận 29/10/2016
  11. sonzim16 -
    CTV
    30/10/2016
  12. Min - 2 Bình luận 02/11/2016
    • Mộc -
      Admin
      03/11/2016
  13. du hoc nhat ban - 6 Bình luận 13/12/2016
    • Mộc -
      Admin
      13/12/2016
      • du hoc nhat ban - 6 Bình luận 13/12/2016
        • Mộc -
          Admin
          13/12/2016
  14. Mai Quý - 9 Bình luận 07/01/2017