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 cho blogspot, code tạo bài viết liên quan cho blogspot, code thêm bài viết cho blogspot
Cách thêm bài viết liên quan cho blogspot, code tạo bài viết liên quan cho blogspot, code thêm bài viết 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ả !
Share:

35 nhận xét:

  1. Goodjob Bro :)))
    Temp kết hợp nhìn đẹp phết :v

    Trả lờiXóa
  2. cái hộp copy làm kiểu gì vậy bác

    Trả lờiXóa
  3. Chào bạn mình vừa tham gia blog mong bạn qua blog mình ủng hộ mình nhé. Cảm ơn bạn <3
    Link blog: https://zstip.blogspot.com/

    Trả lờiXóa
  4. Klq nhưng phần Theo dõi ngay! thì phần Background thêm [code]transition:.4s ease all[/code] vào nhé Qúi, cho nó mượt.

    Trả lờiXóa