Cách thêm bài viết liên quan đẹp và chuyên nghiệp cho blogspot

Xin chào các bạn, đã đến với blog của mình hôm nay ở bài viết này mình xin chia sẻ cách thêm bài viết liên quan dưới chân bài viết đẹp và chuyên nghiệp cho blogspot

Cách thêm bài viết liên quan

Cách Thực Hiện

Bước 1 : thêm CSS bên dưới trước thẻ ]]></b:skin>

Copy

/* Related post */
#related-posts1{float:left;width:49.5%;margin:0}#related-posts1 ul li{list-style-type:none;color:#222;font-size:16px;line-height:30px;font-weight:400;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#related-posts1 ul li a{color:#222}#related-posts1 ul li a:hover{color:#e05388}#related-posts1 ul li a:before{content:"\f006";font-family:'FontAwesome';color:#e05388;margin-left:1px;padding-right:5px}#related-posts1 ul li a:hover:before{content:"\f005"}#related-posts1 h4{color:#222;border-bottom:2px solid #3b5998;padding:10px 10px 7px;font-size:18px;margin:0 0 10px;font-weight:400;background:#ffffff}#related-posts1 ul{margin-left:0;padding:0}#related-posts1 .fa{margin-right:5px}#related-posts2{float:right;width:49.5%;margin:0}#related-posts2 ul li{list-style-type:none;color:#222;font-size:16px;line-height:30px;font-weight:400;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#related-posts2 ul li a{color:#222}#related-posts2 ul li a:hover{color:#e05388}#related-posts2 ul li a:before{content:"\f08a";font-family:'FontAwesome';color:#e05388;margin-left:1px;padding-right:5px}#related-posts2 ul li a:hover:before{content:"\f004"}#related-posts2 h4{color:#222;border-bottom:2px solid #3b5998;padding:10px 10px 7px;font-size:18px;margin:0 0 10px;font-weight:400;background:#ffffff}#related-posts2 ul{margin-left:0;padding:0}#related-posts2 .fa{margin-right:5px}

Bước 2 : thêm Javascript bên dưới trước </head>

Copy

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if>

Bước 3 : các bạn tìm thẻ <data:post.body/> lưu ý thẻ này có 3,4 đoạn nên cần phải chú ý thử từng thẻ một nhé!

Copy

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts1'>
        <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>
<div id='related-posts2'>
<h4 style='border-bottom: 2px solid #28b992;'>
Có thể bạn thích:
        </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 và xem kết quả !

Code : Code Đây Rồi

Bài đăng Mới hơn Bài đăng Cũ hơn