How To Add Related Post Widget With Thumbnail To Blogger Blog

How To Add Related Post Widget With Thumbnail To Blogger Blog

How to add related post widget with thumbnail to a blogger blog isn’t a hard thing, but it’s still hard for those with little or knowledge of coding, so in this tutorial, you will be learning how to add the related post widget to your Blogspot blog successfully.

having known, it’s important to note that having a related post widget activated on your blogger blog is important as it plays a vital role in your blog functionality like increasing your page views.

Quick Read:

Quite well, you might have related articles on your blog that your esteem readers will love to read, but because it’s not showing up, they reluctantly walk off your blog, that’s already a loss in page views that may increase your earning

How I Quickly Added The Related Post With Thumbnails To Blogger Blog.

To add the widget won’t actually cost you a thing compared to what you stand to lose if the needful isn’t done at the right time, with the line of codes I am going to be presenting you can get the job done with a few clicks, so stick with me.

Unlike WordPress blog with tons of plugins that get the job done with a few clicks, on a blogger blog, you have to write every bit of codes or get done for by a webmaster

though, you can get it done yourself by reading an online tutorial like this and following the simple instruction, in the other not to jeopardize your blog look.

This is what the Related Post widget looks Like.

How To Add Related Post Widget With Thumbnail To Blogger Single Post Page.

With the Above Image, you can see that after your visitor is done with the main article, they may likely click one of the related post, thereby increasing page views.

So, let’s get to how you can add a related post widget to your blogger blog successfully.

To Add the related post widget to you blogger blog, kindly.

==> Login to your blogger(Blogspot) dashboard

==> At this point, you should click on Theme at the left side bar of the dashboard as seen below.

How To Add Related Post Widget With Thumbnail To Blogger Single Post Page.

==> after clicking on theme, another page with different opens up as seen in the Image below.

How i added related post widget to blogger blog

==> kindly click on the drop down arrow, where you will see Backup with some other options and edit HTML, I advise you to first backup your blog before going on with process. after which you will click on Html as seen in the Image below.

How you can add related post widget to blogger blog

==> Now click inside the HTML and Use C+F to find </header> 

Right Above </header> kindly paste the below simple line of codes

<!–Related Posts Scripts and Styles Start–>
<style>
#related-posts {
float : left;
width : 350px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(https://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/s200/greentickbullet.png) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>

<script type=’text/javascript’>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == ‘alternate’) {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length – 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length – 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length – 1) * Math.random());
var i = 0;
document.write(‘<ul>’);
while (i < relatedTitles.length && i < 20) {
document.write(‘<li><a href=”‘ + relatedUrls[r] + ‘”>’ + relatedTitles[r] + ‘</a></li>’);
if (r < relatedTitles.length – 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write(‘</ul>’);
document.write(‘<a href=”https://www.ogbongeblog.com/2012/01/how-i-added-related-posts-widget-to.html” target=”_blank” rel=”nofollow”><font size=”1″ color=”black”>[Get Related Posts Widget for Your Blog]</font></a>’);
}
//]]>

</script>

<!–Related Posts Scripts and Styles End–>

Click and save the template.

Hey! You are not done yet, one more step to get it done Asap!

==> Still click on the html and use this key to fine C+F  just copy the below line of code and fine either of them.

<p class=’post-footer-line post-footer-line-1′>

Or

<div class=’post-footer-line post-footer-line-1′> 

 

kindly paste the code below immediately after any of these lines, depending on which you find on your blogger template.

<!– Related Posts with Thumbnails Code Start–>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div id=’related-posts’>
<font face=’Arial’ size=’3′><b>Related Posts: </b></font><font color=’#FFFFFF’><b:loop values=’data:post.labels’ var=’label’><data:label.name/><b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if><b:if cond=’data:blog.pageType == &quot;item&quot;’>
<script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;’ type=’text/javascript’/></b:if></b:loop> </font>
<script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
<!– Related Posts with Thumbnails Code End–>

Click on save. to get the changes saved.

Conclusion

Now, you can view your blog and see the changes yourself, but you should note that if your blog is void of proper categories(labels). It may not show the related post as they’re not grouped.

Getting the related post widget for your blogger blog is easy, and you can get it done yourself with the above lines of codes, but make sure you don’t miss anything for it to work properly.

Share this post

2 thoughts on “How To Add Related Post Widget With Thumbnail To Blogger Blog

Post Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.