Beautiful & Fastest Related Post Widget For Blogger

Now many users are getting into blog world and as a primary (In many cases, Final) platform, most of them has chosen Blogger. Yeah, blogger is the best blogging platform for the Noobs and also for the pros too indeed. But it has a lot of limitation. Such as, there are only a few official widget available for blogger. On the other, WordPress provides a lot of ways to customize with unlimited plug ins. But yet blogger is my favourite. One of the most common widget I use is “Related Post”. That will display a list of related post in any blogger post page. It was one my biggest headache too. As I can’t find the best one, I tried several others. Some of them are too heavyweight and made my blog slower. And some of them are just boring. But there’s another! It doesn’t provide thumbnail image, except this, it is the fastest and best and also tiniest Related Post Widget I have ever found. Though I didn’t like the style of source, so I have customized the CSS part. In this widget, The related articles are chosen from other posts in that same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest. Join me after the break for this great trick.

How To Add Related Post Widget in Blogger

CSS Part

1st Log in to your blogger account.
Go to Layout >Edit HTML in your regular Blogger Dashboard (Template > Edit Template in New Blogger in Draft Dashboard).
Make sure to Back up your existing Template before making any changes!
Also Make sure to check the "Expand Widget Templates" box from the right-top side.
Search For the following text

]]></b:skin>

Replace this with the following CSS.

#related-posts { 
float : left;
width : 600px;
border : 1px solid #e0e0e0;
border-right : 1px solid #e0e0e0;
margin : 20px 0 20px;
padding-bottom: 10px;
} 
#related-posts .widget h2, #related-posts h2 { 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIeKobtOsU7t9CEmTgtXsUCWoUAviKTXXtDSPypbkOZkND_7lNK0OedspXY0LSHaQDEtk4gzmMB6mwinALG5zLwRZwcm9KmmbwDnb3GVU-axjupVTGbGJC2Nb6ah-vsmnl5LmwZXhhgco/s1600/h3_repeat.jpg) repeat-x left center;
text-align : center;
margin : 16px 0;
font-style:italic;
} 
#related-posts .widget h2 span, #related-posts h2 span {
color : #161618;
font-size : 18px;
text-transform : none;
background : #f7f7f7;
padding : 0 10px;
}
#related-posts a {
font-size : 13px;
text-decoration : none;
color : #1591c0;
-webkit-transition:color .5s linear;
-moz-transition:color .5s linear;
display : block;
padding : 5px 4px;
line-height : 16px;
}
#related-posts a:hover {
color : #fff;
background : #0db5e5;
}
#related-posts ul { 
list-style : square;
margin : 0 0 0 16px;
display:block;
} 
#related-posts headmmm h3 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicBr6YQZUKhihZa7sWM8RfthagUkaQwOFMF2Mj9aG0IfbtIyQq2EW2CNRRM42TgOh3wn8aim8uXMslT7e-XzaWadjxOoZv3ucHigF2xhH9uSSTktN5t_b7ssIl5Z2UZPNG9i6UA7bN6O8/s1600/h3_repeat.jpg) repeat-x left center;
text-align : center;
margin : 16px 0;
font-style:italic;
}
#related-posts headmmm h3 span {
color : #161618;
font-size : 18px;
text-transform : none;
background : #f7f7f7;
padding : 0 10px;
}
#related-posts ul li { 
display : block; 
background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb5LApr2iIeEq4xVz4hxJI8P2EegffXiAYQvMLW6X9awU4nm4DXPDBIKqfdgoconNtfnyAHFzXCKXnzUXPIraB0E2Gdj8Bxr3grNWm2cDGjxDmMWmdpka_9vHM1u8i-f12crx96FECJFw/s1600/rss-basic.png") no-repeat 0 0; 
padding-bottom : 1px; 
padding-left : 21px;  
}
]]></b:skin>

HTML Part

Search for the </head> tag by using “Ctrl + F”.
Add the following code just before the </head> tag.

<script src='http://db.tt/IlVWTPwW' type='text/javascript'/>

Now search for <data:post.body/>. In some of the templates this code may look like this
<div class='post-footer-line post-footer-line-1'> and Add the following code just below <div class='post-footer-line post-footer-line-1'>

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div id='related-posts'>
<headmmm><h3><span>Related Post Without Thumbnail</span></h3></headmmm>
<b:loop values='data:post.labels' var='label'><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=4&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div>
</b:if>

Now Save The Template! You are done.

Customization

Customize the CSS part to change how the widget look.
In order to change the number of maximum related posts being displayed for each label, search for the code below (in HTML part) and change the number "4" to any desired number.

max-results=5

To find a working demo, please visit here. The CSS part is created by me and the Java Script is written by Debajyoti Das @SnapHow. If you feel any problem, please report here.