Learn How To Become a blogger ,Free Templates,Blogger Widgets, Blogger Gadgets,Blogger Tricks And Tips ,Download browsers,software,Net

Friday, August 10, 2012

Best related posts widget for blogger

Related Posts Widget for Blogger,add Widget wonderful for displaying links to related posts beneath each of your blog posts.


To implement the related posts widget you will have to follow 2 simple replacement steps.

 How to Add Related Posts Widget to Your Blog?
  1. Go to Template >Edit HTML in your Blogger Dashboard.
  2. Back up your existing Template before making any changes!
  3. Make sure to check the "Expand Widget Templates" box.
  4. Now find this line of code

</head>

  • and replace it with
 <!--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://1.bp.blogspot.com/-rhbyr3jdDc0/UCWDcUjnVqI/AAAAAAAABdI/oCnpFV73IlE/s1600/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=&quot;Related Posts&quot;;
</script>
<script src='https://bloggertofree.googlecode.com/svn/trunk/related_posts_min.js' type='text/javascript'/>

<!--Remove--></b:if>
<!--Related Posts Scripts and Styles End-->
</head>
 to change the title of your widget you can edit this line of the above code

var relatedpoststitle="Related Posts";

5.Now find this line of code

<div class='post-footer-line post-footer-line-1'>
If you cant find it then try finding this one

<p class='post-footer-line post-footer-line-1'>
 6.Now immediately after any of these lines(whichever you could find) place this code snippet
<!-- Related Posts 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>
<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>

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

<!--Remove--></b:if>
<!-- Related Posts Code End-->

 Number of related posts that are displayed..
var maxresults=5;

Note: If you want to display the Related Posts on every page, then remove the 4 lines of code starting with This code, which in blue  <!--Remove—> 
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 </b:if>
If you have any questions regarding the implementation of this Widget to your own blog, shoot me a comment and I will be happy to help!


0 comments:

Post a Comment

Please do not spam Spam comments will be deleted immediately upon our review.

Regards,
JeHad Hussein

Note: Only a member of this blog may post a comment.

Subscribe via email for free

Activate your subscription by clicking on the link in an email from Feedburner. We respect your privacy.

Most Popular

 

random topics

Followers

Are you looking for?

Become a Fan On Facebook!

Follow @Bloggertofree