Add Related Posts in Blogger in two different ways

How to Add Related Posts in Blogger Under 3 Minutes

displaying related posts on you blog could be the best thing that could ever happen to it (traffick-wise) Do you know related posts can be used to make consistent readers? You might feel confused how.
Suppose a visitor has come to your blog from search engines. He will look for his prospective areas. Here in this case the visitor will possibly leave after reading it.
But if you can serve related post links besides the main content, the visitor will feel very much interested to check them. Their intention was to solve the problems. So anything related will be regarded by them.
This is the main concept how related contents help to make visitors consistent. There are further more advantages as the following:

• Related posts reduces bounce rate.
• It can convert search traffic into regular traffic.
• It dramatically improves the conversation rate.
• It drives seo value to the internal pages.

That’s why, your blogger blog also needs this feature. But unfortunately Blogger doesn’t have it in default.
Not sure why Google hasn’t included it yet. But whatever we can’t lose this superb opportunity.
There are several ways to add them. Let me show you the quickest and the easiest ways to add related posts in no time. It took less than 3 minutes for me.

Method #1: Add related posts using LinkWithin

LinkWithin is a pretty service to show related stories. It doesn’t require sign-up, easy to install and provides elegant designs with minimal coding.
Their objective is not to get passed the old articles. Instead, leverage old articles to drive some additional views without any additional effort.
Most amazingly it is free of cost. You don’t even need to invest a single penny to use it. So let’s get back to the process.

Step 1: Go to linkwithin homepage

Simply head over to http://www.linkwithin.com/. You’ll be able to see a form to generate it.
Now input your details such as email, blog link and platform (blogger in your case).
The width is defined to choose how many stories you will show. 3 stories in default means it will show 3 most related stories in a row. You can increase it up to 5.
There is a check-box to define if your blog has a dark background. That’s mean it will show light texts (ex: white) while ticked. But if your design doesn’t have any dark background, just leave it unchecked.
If everything is done, click the “Get Widget!” button.

Step #2: Install the widget

Now you’ll see a documentation how does it work. You can follow it up as explained. Though I’m gonna show you here step by step.
Click the “Install Widget” button while logged into your blogger account.

You will be taken to the widget adder page. If you’ve multiple blogs on blogger, choose your preferred one. When you’re done, click add widget button.

Now a new block will be added along the widgets. Simply drag and drop it underneath “Blog Posts”. Then finally click “Save arrangement”.
You can put the block anywhere, even in widget area. But for optimal performance, it should be added under the posts.
N.B: It will need a few hours for indexation in the third party website. So you will need to wait before seeing related contents live.

Method #2: Add related posts using OutBrain

OutBrain provides very much flexible related posts service. It offers to show them as texts or thumbnails.
It’s also free of cost and could be added instantly. But it will require users to sign up though it is very easy. Let me guide you how to add this very easily.

Step #1: Go to outbrain widget page

You need to head over to https://my.outbrain.com/getwidget. The form will appear to generate the widget.
First, you need to choose how you want the stories to appear. There are two options, (1) as simple textual links (2) links with thumbnails. Click your preferred one.

Then you’ve to choose your platform. Same as before, you should select blogger.

Next, you’ve to fill a short form in order to complete the registration. Input the correct information for all required fields. When you’re done, tick the check-box to accept terms and conditions and click “Install”.
Then check your email account to confirm the sign up.

Step #2: Install the widget

After you click the install button, a pop up will appear to add the widget. Make sure you’re logged into your blogger account.
Choose your preferred blog from the drop-down and click “Add Widget”.

Now same as the previous method, a new block will be aligned between the widgets. You need to drag and drop the block underneath the “Blog Posts” element for optimal performance.
Are you done? Click the “Save arrangement” button to finalize the changes.
N.B: It will need a few hours for indexation in the third party website. So you will need to wait before seeing related contents live.

Conclusion!

In this post, I tried to show how to add related posts in blogger blog. I’ve showed you two different methods. But both of them are trusted and tested by myself.
Here one is another’s alternative. So you can choose your preferred related post service. If you face any unexpected problem, don’t forget to let us know here. I’ll try my best to solve it.


OR

ADD RELATED POSTS BY EDITING THE HTML OF YOUR TEMPLATE 

Got this one from Ogbonge blog

==> Log in to your blogger dashboard
==> From there go to Layout > Edit HTML and tick the expand your widget templates box (option on the right). If you are using new Blogger dashboard, go to Template > Edit HTML
==> Click inside the HTML and use CTRL+ F to find </head>



Right above </head>, paste the code below.

<!--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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioJKrX42noURbnsx_gjoilScSr-SsJVchFoQs2RL_cnW7rH1mz-gFCqyGd4Z5tsisrs-4v-tmiVmn5avnn8NlNyHNbdsqWq_W3NCfrxcw7ctZ6ciD_Ppv0L2vKE2Jn1ycH0cZ2L_Kchlo/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="http://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 on Save template

Now use CTRL+F to find this line of code

<div class='post-footer-line post-footer-line-1'> 

OR 

<p class='post-footer-line post-footer-line-1'>

Now paste the code below immediately after any of these lines (whichever you could find): 



<!-- 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 Template.

Now, go ahead to view one of your blog posts. You should see the Related posts below it.

Note: If you did not add a label (category) to a post, you might not see the related posts below it.

You can alter the CSS rules if you want to customize the look and feel.

have you added related post on your blog? please share your thought in the comment section and don't forget to share, it may be exactly what your friends need.