Chủ Nhật, 6 tháng 10, 2019

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

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é


<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>
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;
   ----------
Mình đã thử nhưng có lúc xuất hiện khung bao quanh code có lúc lại không . Nhung chúng đều
có tính chất Responsive nghĩa là phù hợp với màn hình hiển thị. Bạn nào có đoạn code nào hay hơn thì
chia sẻ nhé. Chúc các bạn thành công !
sưu tầm nguồn tại đây

Bài viết liên quan:

0 nhận xét:

Chào bạn nếu có bất cứ thắc mắc nào hãy để lại ý kiến. Nhận xét của bạn đều rất quan trọng, tôi rất vui nếu bạn để lại nhận xét của mình