Related Posts Widget For Blogger

Guest Post - By 24work

Related Posts Widget For Blogger / Blogspot with jQuery

17+ Featured Content Slider for Blogger Using jQuery Tutorial

Related posts widget is very important for a blog as it increases the number of page views and also help the visitor to view other related posts on the blog.Now here is wonderful hack for displaying links to related posts beneath each of your blog posts.At present there are many types of related post widget like with thumbnails by using Java script Using HTML etc... Here i am going to show a method which is very easy to install.It will show only title of related posts using jQuery.It will look like an image below.

• Related Posts Widget For Blogger

Instructions To Follow:
STEP #1
Log in to Blogger, go to Design -> Edit HTML and mark the tick box "Expand Widget Templates"

Then, find (CTRL+F) this code in the template:

</head>

And immediately before it, paste this code:

<!--Related Posts Scripts and Styles www.bdlab.blogspot.com Start-->
<!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><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/AVvXsEhGKIJoqM0hB1olnFaZ__1EaA6EDA2PuvShBt6V-jJBlGd11_vpgJJX7ADuPrPUiQueeZaRQcXvPbXNYdcbDQy69kRBLuOcK9r8wbfRiB63QyXpYUNd8qCtU3l7hFiotWAy37kSAZXShWw/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://safir85.ucoz.com/24work-blogspot/related-posts/related-posts-for-blogger-24work.js' type='text/javascript'/>

<!--Remove--></b:if>
<!--Related Posts Scripts and Styles www.bdlab.blogspot.com End-->

If you want to change the title of your widget you can edit this line of the above code

var relatedpoststitle="Related Posts";

If you want you can edit the blue and black colors present in this code

2.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'/>

Now immediately after any of these lines(whichever you could find) place this code snippet

<!-- Related Posts Code www.bdlab.blogspot.com 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><a href='http://bdlab.blogspot.com'><img style="border: 0" alt="Related Posts Widget for Blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEhLBL1HiErWg_Fiw1XL2S9OSv5tVQ5FyKnzkzDqpkthoU4qk1aiuB6cgSaq3IxygwOj1_kXC9np7Fae2NJ6FHF3_QQZ8MpqWCjKkP5knc9gl20A9COpJ_t8xcnZkfrKiNQCRzh0dukGmR/s1600/blogger-widgets.png" /></a>

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

<!--Remove--></b:if>
<!-- Related Posts Code www.bdlab.blogspot.com End-->

Now Click Save Template


You can adjust the maximum number of related posts being displayed by editing this line in the code.

var maxresults=5;

Note: If you want to display the Related Posts on every page, then remove the 4 lines of code starting with <!--Remove-->

How To Add jQuery Related Posts Widget for Blogger 




Typical Usage #1

To display related links at the end of every post. copy this code into a new HTML/Javascript widget and place at the bottom of the post or at the footer in the page elements section. Widget uses jQuery v1.3.2, If you already included jQuery into your blog. no need to do it again. 

Instructions To Follow:
STEP #1
Log in to Blogger, go to Design -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:

<data:post.body/>

And immediately after it, paste this code:

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>



<script src="http://safir85.ucoz.com/24work-blogspot/related-posts/related-posts-widget-1.0-24work.js" type="text/javascript"></script>



<script type="text/javascript">

relatedPostsWidget({

'containerSelector':'div.post-body'

,'loadingText':'loading...'

});</script>

Now Click Save Template



Typical Usage #2

To show related links at the side column. copy this code into a new HTML/Javascript widget and place at the side in the page elements section.Again, If you already included jQuery into your blog. no need to do it again.

Instructions To Follow:
STEP #1
Log in to Blogger, go to Design ->

Add a Gadget of HTML/JavaScript type.

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://safir85.ucoz.com/24work-blogspot/related-posts/related-posts-widget-1.0-24work.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
   'loadingText':'loading...'
});</script>

Now Click Save