Add Related Posts widget to blogger theme

Today’s article is about how to add a “Related Posts” tool at the bottom of every Blogger post, and some bloggers always think that the “Related Posts” component is just an unimportant thing in their Blogger blog, but they don’t know that it helps reduce the bounce rate it will give. Significant traffic to your blog. Because it helps the reader to find a post related to this Article and also makes it linger in your blog for an extended period of time. There are a lot of other related article interfaces out there but most of them are poorly coded or not very targeted to show related posts, they even show some other random posts.

Why should we put this tool?

Sometimes you may want to do something extra and attractive with your blog to attract new visitors and gain more traffic to get additional revenue. Having your blog visitor keep for a long period of time is a daunting task but this is very beneficial for your blog, as it will help you to reduce the bounce rate very quickly, the more visitors your site has, the greater the chances of getting good revenue through ads and AdSense.

How to add Related Posts tool to Blogger blog?

The first step ( adding CSS )

Before editing, we recommend that you make a backup copy of your template so that if there is a mistake in the design of your blog, you should return to the previous settings.
The first thing that you should do is log in to your Blogger account and go to >> Appearance >> Edit HTML and search for Tag ]]> </ b: skin> and paste the following code above.
/* ######## Related Post Widget by Star4Tips.com ######################### */
#related-posts {
margin-bottom: 10px;
padding: 10px 0;
}
.related li {
    width: 33.3%;
    display: inline-block;
    height: auto;
    min-height: 184px;
    float: left;
    padding-right: 5px!important;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}
.related li h3 {
margin-top:0;
}
.related-thumb {
width: 100%;
height: 180px;
overflow: hidden;
border-radius: 2px;
}
.related li .related-img {
width: 100%;
height: 180px;
display: block;
position: relative;
transition: all .3s ease-out!important;
-webkit-transition: all .3s ease-out!important;
-moz-transition: all .3s ease-out!important;
-o-transition: all .3s ease-out!important;
}
.related li .related-img:hover {
-webkit-transform: scale(1.1) rotate(-1.5deg)!important;
-moz-transform: scale(1.1) rotate(-1.5deg)!important;
transform: scale(1.1) rotate(-1.5deg)!important;
transition: all .3s ease-out!important;
-webkit-transition: all .3s ease-out!important;
-moz-transition: all .3s ease-out!important;
-o-transition: all .3s ease-out!important;
}
.related-title a {
font-size: 14px;
line-height: 1.4em;
padding: 10px 0 4px;
font-weight: 500;
color: #fff;
display: block;
text-shadow: 0 .5px .5px rgba(34,34,34,0.3);
}
.related li:nth-of-type(3),
.related li:nth-of-type(6),
.related li:nth-of-type(9) {
margin-right: 0;
}
.related .related-tag {
position: absolute;
top: 15px;
left: 15px;
background-color: #CD2122;
color: #fff;
text-transform: uppercase;
font-weight: 400;
z-index: 5;
height: 20px;
line-height: 20px;
padding: 0 6px;
font-size: 11px;
}
.related .related-thumb .related-img:after {
content: no-close-quote;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 120px;
background: url(http://3.bp.blogspot.com/-LnvazGBvKh8/VskckSkmzxI/AAAAAAAAC4s/erEgI6A_ih4/s1600-r/metabg.png) repeat-x;
background-size: 100% 100%;
opacity: .8;
}
.related-overlay {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(40,35,40,0.05);
}
.related-content {
position: absolute;
bottom: 0;
padding: 15px 15px 11px;
width: 100%;
line-height: 1.2em;
box-sizing: border-box;
z-index: 2;
}
.related .related-content .recent-date {
color: #ccc;
font-size: 12px;
font-weight: 400;
}
.recent-date:before, .p-date:before {
content: '\f017';
font-family: fontawesome;
margin-right: 5px;
}

The second step ( add HTML )

In the template, find the tag <data: post.body /> and paste the following HTML code below it.
In the event that you cannot find <data: post.body /> in your template then search for one of these two codes <div class = ‘post-footer’> or <div class = ‘post-footer-line post-line-line – 1 ‘> </div> , then you can paste the code below it.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
        <b:if cond='data:post.labels'>
          <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast == &quot;true&quot;'>
              <data:label.name/>
            </b:if>
          </b:loop>
        </b:if>
      </div>
 </b:if> 

Third Step ( Add Script )

Now, this is the most important part of our lesson and you have to do it very carefully. In the template, find the </body> tag and paste the following HTML markup on it.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[

var text_month = [, "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
var no_image_url = "http://2.bp.blogspot.com/-IO-XEI1LgEs/VmPNKFp0BhI/AAAAAAAACOg/_JrYHMBXV5w/s1600-r/nothumb.jpg";
var related_number = 3;

$("#related-posts").each(function() {
    var g = $(this).html();
    $.ajax({
        url: "/feeds/posts/default/-/" + g + "?alt=json-in-script&max-results=" + related_number,
        type: 'get',
        dataType: "jsonp",
        success: function(data) {
            var posturl = "";
            var htmlcode = '<div class="related">';
            for (var i = 0; i < data.feed.entry.length; i++) {

                for (var j = 0; j < data.feed.entry[i].link.length; j++) {
                    if (data.feed.entry[i].link[j].rel == "alternate") {
                        posturl = data.feed.entry[i].link[j].href;
                        break
                    }
                }
                var posttitle = data.feed.entry[i].title.$t;
                var postlabel = data.feed.entry[i].category[0].term;
                var get_date = data.feed.entry[i].published.$t,
                    year = get_date.substring(0, 4),
                    month = get_date.substring(5, 7),
                    day = get_date.substring(8, 10),
                    date = text_month[parseInt(month, 10)] + ' ' + day + ', ' + year;
                var content = data.feed.entry[i].content.$t;
                var $content = $('<div>').html(content);
                if (content.indexOf("http://www.youtube.com/embed/") > -1 || content.indexOf("https://www.youtube.com/embed/") > -1) {
                    var src2 = data.feed.entry[i].media$thumbnail.url;
                    var thumb = '<a class="related-img" href="' + posturl + '" style="background:url(' + src2 + ') no-repeat center center;background-size: cover"/>'
                } else if (content.indexOf("<img") > -1) {
                    var src = $content.find('img:first').attr('src');
                    var thumb = '<a class="related-img" href="' + posturl + '" style="background:url(' + src + ') no-repeat center center;background-size: cover"><span class="related-overlay"></span></a>'
                } else {
                    var thumb = '<a class="related-img" href="' + posturl + '" style="background:url(' + no_image_url + ') no-repeat center center;background-size: cover"><span class="related-overlay"></span></a>'
                }
                htmlcode += '<li><span class="related-tag">' + postlabel + '</span><div class="related-thumb">' + thumb + '</div><div class="related-content"><h3 class="related-title"><a href="' + posturl + '">' + posttitle + '</a><span class="recent-date">' + date + '</span></h3></div></li>'
            }
            htmlcode += '</div><div class="clear"/>';
            $("#related-posts").html(htmlcode);
            $('.related-img').each(function() {
                $(this).attr('style', function(i, src) {
                    return src.replace('/default.jpg', '/mqdefault.jpg')
                }).attr('style', function(i, src) {
                    return src.replace('s72-c', 's1600')
                })
            })
        }
    })
});
}
 //]]>
</script></b:if> 

Read also:

Conclusion

Now you have learned how to add a related post widget at the bottom of every Blogger post. Visit your blog and check out the cool tool that is lively at work, I hope you liked this lesson, and if you have benefited, please share it with your friends, I am working hard to develop more of these cool mini tools, please subscribe to our mailing list to receive more additions.

function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.jsdelivr.net/gh/MohammadQt/Itheric@master/highlightpro.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;