Related Posts Blogger Widget and LinkedWithIn for BloggerFUN IT MASTI

Related posts Widget, as the title says , this Widget will generate the list of related posts. this Widget can be added either in homepage (under each posts) or inside the post. By placing this related posts Widget, there is chance the spread the other posts to visitors and they may have a tendency to take that post from the list, it will reduce the bounce rate of your blog and will keep your visitors from suddenly quit from your blog. Let's see how to add related posts widget to Blogger

To view demo see this Related posts Widget
This can be done using two ways

Using LinkedWithIn Widget

It is very simple to add LinkedWithIn Widget
Go to LinkedWithIn website and follow the simple instructions
Give e-mail id, blog url, select platform as Blogger and select number of posts should be displayed.

Add Related Posts Manually to Blogger

Sign In to Blogger Dashboard
Go to Template -> Edit HTML
Find </head>
Copy the below code above </head>

<b:if cond='data:blog.pageType == "item"'> /* remove this */
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8fSBbec01BqRsQYUGcLcKtGXf3rtZL-9XKlTwWSFlA6kBtsA-0f0qjl8gy_fbWufKEhLp5RbLrDWOmCQcniAHmcvBa4BOAq1X_llxxfbgNkdOYGD6uYdIhz12qmtghCLgcq55tc4zMkU/s400/noimage.png";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</script><a href="http://netoopsblog.blogspot.com" style="font-size:0pt">Blogger Widgets</a>
<script src='http://netoopscodes.googlecode.com/svn/netoops-related-posts-with-thumbnails-blogger.js' type='text/javascript'/>
</b:if> /* remove this */

Customization

RED marked - remove red marked portion to add this Widget to Homepage
Brown - place the URL of the image in quotes to display if there is no image in the post.
maxresults=5 - change the value to change the number of posts to be displayed.
splittercolor="#DDDDDD" - change the color of splitter line between posts. Check here to see color codes selector
relatedpoststitle="Related Posts" - Change the Name of title.

Add to Post Footer

Find <div class='post-footer'> and copy the below code above it

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://netoopsblog.blogspot.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGKSDpeTYBNngVoKNaSDEMaOULa3ccyDTk2OwPtaiT0PFP27Hd0c6af96wydXPQXcRHxdgFS4hStHWHefPjdvDgQ2SpiElrpbH9NGBbU06Vgi4nmOtL41khatH6ISfTpRZtnwBakCD2hc/s1600/1x1juice.png'/></a>
</b:if></b:if>

Remove Orange marked to add related posts to homepage too.
Change RED marked to change the number of posts should be displayed

I hope this article will help you. If so please like and share our blog. You can check here more Exciting Widgets.

FUN IT MASTI