Related Posts Widget for Blogger

Related Post Widget is a cool widget. Related post widget with images after each post will increase the beauty of your blog. Displaying the related post at the end of your post will help you to increase the page views.

Just Follow These Simple Steps to Add Related Post Widget:

Don't Forget to BackUp Your Template.

Step 1.   Log in to your blogger account. Click on Drop-down menu > Click on Template.

Step 2.   Click on Edit HTML and then check Expand Widget Templates.

Step 3.   Now find </head> ( Press CTRL + F for a search bar ) and put the following code above / before </head>.

 <!--Related Posts with thumbnails 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 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:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";

var maxresults=5;

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

<!-- remove --></b:if>

<!--Related Posts with thumbnails End-->

Step 4.  Now find <div class='post-footer-line post-footer-line-1'> OR <p class='post-footer-line post-footer-line-1'> and just after any of these codes paste the following code.

 <!-- Related Posts with Thumbnails Code Start-->

<!-- remove --><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'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href="http://iactips.blogspot.com/2012/05/related-posts-widget-for-blogger.html"><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://4.bp.blogspot.com/-fRg35rCh9V8/T8AxNBS1qoI/AAAAAAAAAUg/8XCREL34grU/s1600/Related+post+widget+dot.png" /></a><a href="http://iactips.blogspot.com" ><img style="border: 0" alt="IAC Tips" src="http://4.bp.blogspot.com/-fRg35rCh9V8/T8AxNBS1qoI/AAAAAAAAAUg/8XCREL34grU/s1600/Related+post+widget+dot.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Click on Save Template and your widget is ready.

• By default you will see five related post in this widget if you want to show six or more. In first code you will see Red colour line var maxresults=5; Change this 5 to your desired number. Now in second code you will have to edit red colour line max-results=6 ( it should be one more then var maxresults ).
•  Change the title of your widget by change Green colour Related Posts in first code to your desired title.
• If you want to show Related post widget after every post on the Home page/ Main page( Posts page ) you should have to remove yellow colour lines from both codes.

Drop Your Comments......................

Share it Please

Tweet

Unknown

I am a student of computer science.Owner of IAC Tips blog. I love to share my knowledge and experience with others. Follow my blog for tips tricks of internet, computer and software.