How To Add Related Posts to Blogger

Are you looking to enhance your Blogger site by keeping visitors engaged and encouraging them to explore more of your content? Adding related posts is a great way to achieve this. By displaying a list of related articles at the end of each post, you can help readers discover more content that interests them, thereby increasing page views and reducing bounce rates. In this quick guide, we'll walk you through the steps to add related posts to your Blogger site.

1. Go to the "Edit HTML" page of your Blogger blog.

2. Scroll down to where you see this line:

<data:post.body/>

3. After the above line, copy and paste the code below to a suitable location:

<!--Related post code start from here-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.btt-rposts{margin:15px 0;}
#btt-rposts-data > div{margin:0 0 15px 0;}
#btt-rposts-data > div:last-child{margin:0;}
#btt-rposts-data > div strong{display:block;margin:0 0 8px 0;}
#btt-rposts-data ul{list-style:none;margin:0;padding:0;}
#btt-rposts-data ul li{margin:0;padding:0 0 6px 0;}
</style>
<div class='btt-rposts'>
<div class='btt-rposts-content'>
<h3 class='btt-rposts-header'>Related Posts :</h3>
<div id='btt-rposts-data'></div>
<script type='text/javascript'>
var homeUrl = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 3;

function bttListEntries(json) {
    var ul = document.createElement('ul');
    var maxPosts = Math.min(json.feed.entry.length, maxNumberOfPostsPerLabel);

    for (var i = 0; i &lt; maxPosts; i++) {
        var entry = json.feed.entry[i];
        var alturl;

        for (var k = 0; k &lt; entry.link.length; k++) {
            if (entry.link[k].rel === 'alternate') {
                alturl = entry.link[k].href;
                break;
            }
        }

        if (alturl !== location.href) {
            var li = document.createElement('li');
            var a = document.createElement('a');
            a.href = alturl;
            a.appendChild(document.createTextNode(entry.title.$t));
            li.appendChild(a);
            ul.appendChild(li);
        }
    }

    for (var l = 0; l &lt; json.feed.link.length; l++) {
        if (json.feed.link[l].rel === 'alternate') {
            var raw = json.feed.link[l].href;
            var label = raw.substring(homeUrl.length + 13).replace(/%20/g, ' ');
            var h = document.createElement('strong');
            h.appendChild(document.createTextNode(label));
            var div1 = document.createElement('div');
            div1.appendChild(h);
            div1.appendChild(ul);
            document.getElementById('btt-rposts-data').appendChild(div1);
        }
    }
}

function bttSearch(query, label) {
    var script = document.createElement('script');
    script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&amp;callback=bttListEntries');
    script.setAttribute('type', 'text/javascript');
    document.documentElement.firstChild.appendChild(script);
}

var labelArray = [];
var numLabel = 0;

<b:loop values='data:posts' var='post'>
    <b:loop values='data:post.labels' var='label'>
        var textLabel = &quot;<data:label.name/>&quot;;
        if (labelArray.indexOf(textLabel) === -1) {
            labelArray.push(textLabel);
            if (numLabel &lt; maxNumberOfLabels) {
                bttSearch(homeUrl, textLabel);
                numLabel++;
            }
        }
    </b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>
<!--Related post code end here-->

4. Click on the save button and refresh your site.

The post How To Add Related Posts to Blogger appeared first on Blogger Tips And Tricks|Latest Tips For Bloggers.