RealcomBiz
Pin It

Add Related Post/Articles Widget To Your Blogger Blog

This is a must have widget for all bloggers, with this widget on your blog, it will make readers to spent more time on your blog when they see related articles of interest. the related post widget will show articles having the same label.




How to add related post widget

Login to your blogger dashboard
Go to "Design" > "Edit HTML" > Back up your template
Mark/Tick "Expand Widget Template"
Use ctrl F to find </head>
Replace it with the code below


<!--Related Posts Scripts and Styles Start-->
<!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;

}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(http://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/s200/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>

<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_min.js' type='text/javascript'/>

<!--Remove--></b:if>
<!--Related Posts Scripts and Styles End-->
</head>


Find the next code below


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

If you are unable to find the above code, then find the one below


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


Place the code below immediately After/Before any of the code you find


<!-- Related Posts Code Start-->

<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>

<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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.realcombiz.com/2012/05/add-related-postarticles-widget-to-your.html'><img style="border: 0" alt="Get Related Posts Widget for your Blog" src="http://image.realcombiz.com/blogger-widgets.png" /></a>

<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>

<!-- Related Posts Code End-->

To change the title of your widget edit the line code below in the first box.


var relatedpoststitle="Related Posts";

To change the number of related post you want to show under each post, edit the code below in the forth box.


var maxresults=5;


Click "SAVE TEMPLATE"
Then you are done. check how to add related post with thumbnails below each post
Note that this can only show related post of a post with thesame label, you have to click on a post having a label before you can see the post related to it.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

1 comment : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Thanks i believe that related post widget plays an important role in engaging the user and also to increase traffic.even those posts that did not get good amount of traffic gets clicked because of the same labels and hence hardwork of admins and writer gets rewarded.so i will say it is like a traffic booster.Related post widget for blogger

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger