Add Related Posts Blogger Widget Manually and LinkedWithIn for Blogger

Related posts Widget, as the title says , this Widget will produce the rundown of related posts. this Widget can be included either in landing page (under each one posts) or inside the post. By putting this related posts Widget, there is risk the spread alternate posts to visitors and they may tend to take that post from the rundown, it will lessen the skip rate of your website and will keep your visitors from all of a sudden quit from your site.

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>

<!--Related Posts with thumbnails Scripts Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'> /* 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'>
vardefaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwcYvGaLMBqffP3V8UAAocVFu86uIc9O65ytBiW0KOtSEtBYeeGVhZSs5o6761h_ZhnH-JhqqPkdS2H58OWx0V1ol6g3eFD0vPqnVgko2Trz6_-vi3oyNOsTKXI7G-6IAiGGIgZinGcPw/s400/noimage.png";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</script><a href="http://www.webseotrix.net" 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 */<!--Related Posts with thumbnails Script End-->

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 == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</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/AVvXsEgkWK_3705aBAy4G7TIG2j6Unpef5OQmcrPcBdFmEJE8utSZs1lanPXFGIGjgkVL5QYT2q61aipF-cMRogxuOpqr_g08hvpKPTxWZf1r5YTswGb0Y8mkoTUlqmhxfkZvn5HS_vdMUoPbbI/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

Share on Google Plus

About Admin

Benheffaf aziz is an avid learner and blog author. He runs Android Aspect and Get Cydia Apps . He started blogging from 2012. He considers the reader comments even more important than his own posts.