Thêm BVLQ & CTBT cực đẹp và chuyên nghệp cho blogger

Chào các bạn, hôm nay blog mình sẽ chia sẻ tới các bạn mẫu Bài viết liên quan và Có thể bạn thích cực đẹp và chuyên nghiệp cho blogger nhé.

HƯỚNG DẪN CÁCH LÀM:

Bước 1: Bạn dán đoạn CSS sau lên phía trên thẻ ]]></b:skin> trong mẫu

/* 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:#ed2e2e}
#related-posts1 ul li a:before{content:"\f006";font-family:'FontAwesome';color:#ed2e2e;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:#f2f2f2}
#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:#ed2e2e}
#related-posts2 ul li a:before{content:"\f08a";font-family:'FontAwesome';color:#ed2e2e;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:#f2f2f2}
#related-posts2 ul{margin-left:0;padding:0}
#related-posts2 .fa{margin-right:5px}

Bước 2: Thêm Javascript này lên trên thẻ </head>

<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: Trong bước này bạn cần chú ý hơn, bạn tìm đến thẻ <data:post.body/> và dán đoạn code sau xuống phía dưới (lưu ý nếu không hiển thị bạn tìm và kiểm tra từng thẻ, trong mẫu thường có ít nhất 3 thẻ này nhé)

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