Related Posts Widget For Blogger

Related Posts Widget for Blogger v1

The related posts widget will show a new related posts section below your post.The related posts widget fetches the related posts from those posts having the same label as the current post.

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

1.Login to your blogger account and get into your Dashboard

2.From there go to Layout > Edit HTML and expand your widget templates(option on the right)

3.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAMV7UsYgB3MC4GGP9FvFFPJrOp07YNFcxrc9sSIYISUKhwKLRAu1cF56jauGsCLpUCbb7jBQfwoeEhy4WB3AAg3_DTKpDFoNQ8bVEpJJt5Qn3Agoun_gySV_MxQXo6VEgldpqFEkca7E/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>

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

4.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 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://www.bloggerplugins.org/2009/08/related-posts-for-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget for Blogger" src="http://image.bloggerplugins.org/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 End-->

var maxresults=5;

this line determines the number of related posts that are displayed..and by default 6 posts are fetched from each label.

Now you should have a working related posts widget on your blog.If you want to customize the look and feel,then you can alter the CSS rules.OR if you have any doubts or need any modifications,you can surely contact me via comments or at Blogger Forums .The codes are well commented .So this can be easily removed whenever you want..

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

Update 29/03/2012 : If the script is not working anymore, do change http://blogergadgets.googlecode.com/files/related-posts-for-blogger.js to http://bloggergadgets.googlecode.com/files/related_posts_compressed.js

Sorry for the trouble :-)

READMORE

Facebook Like Box For Blogger

Facebook Like Button allows you to provide more Sharing Options to your Readers. Your readers can share your posts on Facebook using the Like Button. Have you added the Like button and still not getting any “Likes”? :(. Ok then we will present the Like button in a much better and elegant way.

Here is a Screenshot of the Facebook Like Box. Isn’t it lovely and more “Likable” than the default Like Button?

The  Facebook Like box also includes a link to  your Facebook Fan Page. This FB Like Box was Designed Styled and coded by Mia of Dezign Matterz .  Thanks to her for designing and styling  this awesome Like Box.

How to install the Facebook Like Box?

1. First Fill in the following Details (Code will be updated with these details)

Width of the Like Box                      (Enter the appropriate width of the FB like box)
Facebook Fan Page / Profile URL 

2. Now Login to your Blogger Account and navigate to Design > Edit HTML and check the option which says “Expand Widget Templates”

3. Look for  ]]></b:skin> in your template and just above that place the following code (You can use Ctrl +F to find the code).

.fb_like_box {
margin-top:10px;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background-color:#3B5999;
border:3px solid #2B2B2B;
margin-bottom:10px;
padding:10px 7px;
width:540px;
}
.fb_like_top {
overflow:visible;
padding:0;margin:0 0 5px;
width:349px;
height:24px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIGhsbVuSlQp-raFl7C3F47umaypCSCiDXcFtN49qyLIAmXKqSku2tD1km-wT9FSpFbEf6aXIN5NUbX_e3AHLrfI75mAuldzpfPdpizC6Mzb4YMNYDWpPbJO_76oB-mRxbeAn1jJ7oGok/") no-repeat scroll left top transparent;
}
.fb_like_button_holder {
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background:none repeat scroll 0 0 #FFFFFF;
padding:12px 12px 0 12px;
width:515px;
height:42px;
}

4. Now Look for <data:post.body/> in your template and just below that add the following code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb_like_box'>
<div class='fb_like_top'></div>
<div class='fb_like_button_holder'>
<b:if cond='data:post.isFirstPost'> 
<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if> 
<fb:like expr:href="data:post.canonicalUrl" layout='standard' send='true' show_faces='false' width="450" font="arial" action="like" colorscheme="light"></fb:like>
</div>
</div>
</b:if>

5.Next you have to add the fb namespace to your template tag.Your template should have the specification for the fb tag that you have used. The following namespace declaration will take care of that. To declare the namespace, find

<html

and change it to

<html xmlns:fb="https://www.facebook.com/2008/fbml"

The following screenshot will help you out.

This is necessary for all FBML widgets using the fb tag.  So if you have already added the namespace while adding some other FB plugin, then you can skip this.

6. Now Save your template and you will see a Facebook Like Box on your post pages.

READMORE