Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhovGLTwVIJdDOO7AMu5sH_M15g8FGuVPp9bxsdSsDzFRDodXeLSKM68W4l3BCKw-bqe04E4WJbIk09-76iJAUTPTFqRYaCwp9a-UhZviOi8RUPNaYsUzFPnY3xcQziINA7z7xqJlaJ8LQ/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!".

10 comments : 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. that could be the end of this article. Here youll obtain some web sites that we feel you will appreciate, just click the links over
    Neat huge :) Here my web : Souvenir Pernikahan Unik - Grosir Jaket Parka - Rental Mobil Jakarta

    ReplyDelete
  2. Whats up this is kind of of off topic but I was wondering if blogs use WYSIWYG editors or if you have to manually code with
    HTML. I’m starting a blog soon but have no coding skills so I wanted to get advice from someone with experience.
    Any help would be greatly appreciated!
    Here my web : Busana Muslim Terbaru And
    Baju Muslim Wanita

    ReplyDelete
  3. 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.

    ReplyDelete
  4. 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..
    visit Tel-U

    ReplyDelete
  5. it will make readers to spent more time on your blog when they see related articles of interest.
    please visit link Tel-U

    ReplyDelete
  6. Thanks for the information really like it
    commented by: Kampus terkemuka

    ReplyDelete

Recent Posts

Let's Connect

Site Links

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