New Stylish Related Posts For Blogger Blogs updated 2011

Related post widget is a great widget which helps your readers to know about your blogs older post.Here i have joined the social bookmarking widget with the related post widget. This will help you to increase your site's social media popularity.This widget is a updated version of my previous related post widget.

If you want to look at the earlier versions of the related posts widget posted on my blog, then visit the following links

• Related Posts widget for blogger (based on Labels)
• New Stylish Related Posts For Blogger Blogs(older version).

The latest version of related posts widget comes with added features like "Updated What's Next?" and "related post thumbnail with hover effect ".

Take a look at the demo (or) screen shot below to preview the widget.

Are you excited with the widget shown above??? Want to add this  to your blog, then just follow the steps mentioned below.
How To Add Related Post Widget

1.Please create a back up of your template before you install this widget.To do this, navigate to "Design->Edit HTML" and make a backup of your template clicking on the "Download full template" link at the top. Once the back up is over, follow these steps carefully.

2. Now, we are going to add the CSS part for this widget. Search for the following line in your template.

]]></b:skin>

3. Copy the following code and paste it just above the line mentioned in step2.

<!--start related posts css Info : http://www.blogtipsntricks.com-->
#btnt-rp { -moz-background-inline-policy:continuous; background: none repeat scroll 0 0 #F2F2F2; border: 1px solid #CCCCCC; float:left; font-family:arial; font-size:12.2px; margin:0 0 40px ; padding:14px 0 12px 25px; width:550px; height: 220px; display: inline; }
#btnt-rp h3 { color:#000000; font-size:13px; margin-bottom:3px; margin-top:4px; font-weight:bold; }
.hidden { display:none;}
.social-bookmarks { float:left; display: inline; margin:0 20px 0 0; padding-left:0; padding-top:0; text-align:left; width:40%; border-right: 1px solid #CCCCCC; }
  ul.blogtipsntricks-social { list-style:none; margin:0;display:inline-block; }
   ul.blogtipsntricks-social li { display:inline; float:left; padding:5px; background-repeat:no-repeat; }
   ul.blogtipsntricks-social li a { display:block; width:48px; height:48px; position:relative; text-decoration:none; }
   ul.blogtipsntricks-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
   ul.blogtipsntricks-social li.blogtipsntricks-facebook { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-facebook.png"); }
   ul.blogtipsntricks-social li.blogtipsntricks-twitter { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-twitter.png"); } 
   ul.blogtipsntricks-social li.blogtipsntricks-googlebuzz { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-googlebuzz.png"); }
   ul.blogtipsntricks-social li.blogtipsntricks-stumbleupon { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-stumbleupon.png"); }
   ul.blogtipsntricks-social li.blogtipsntricks-digg { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-digg.png"); }
   ul.blogtipsntricks-social li.blogtipsntricks-delicious { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-delicious.png"); }
   ul.blogtipsntricks-social li.blogtipsntricks-linkedin { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-linkedin.png"); }
   ul.blogtipsntricks-social li.blogtipsntricks-reddit { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-reddit.png"); }
   ul.blogtipsntricks-social li.blogtipsntricks-technorati { background-image:url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-technorati.png"); }
   #blogtipsntricks-cssanime:hover li { opacity:0.2; }
   #blogtipsntricks-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
   #blogtipsntricks-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
   #blogtipsntricks-cssanime li:hover { opacity:1; }
   #blogtipsntricks-cssanime li:hover a strong { opacity:1; top:-10px; }
.related-posts { float:left; margin:0; padding-left:0px; padding-top:0; text-align:left; width:48%; }
  ul#related-posts{ font-family:Helvetica,Arial,sans-serif !important; font-size:10px !important; list-style: none !important; padding: 0 !important; text-transform: none !important; }
  ul#related-posts li{ float: left !important; height: auto !important; margin:5px 5px !important; padding: 2px 1px 4px !important; }
*html ul#related-posts li{ margin:0 13px !important; }
  ul#related-posts li a { -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important; border: 2px solid #FFFFFF !important; display: block !important; height: 72px !important; position: relative !important; width: 72px !important; }
  ul#related-posts li a { color: #474C51 !important; text-decoration: none !important; text-shadow: 0 1px 0 #FFFFFF !important; }
  ul#related-posts li .overlay { height: 66px !important; line-height: 14px !important; padding:6px 0 0 6px !important; position: absolute !important; width: 66px !important; z-index: 10 !important; }
  ul#related-posts li a:hover .overlay { background: #fff !important; display: block !important; opacity:0.9 !important; }
  ul#related-posts li img { bottom: 0 !important; padding:0px !important; }
  ul#related-posts li a:hover { -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important; }
<!--end related posts css.Info : http://www.blogtipsntricks.com-->

Note: If you need any help then feel free to leave your comments below and I will try to customize them as you wish.

4. Expand your template, that is, make sure you have a tick mark in box next to "Expand Widget Template". Now, search using "CTRL+F" for the following line:

    <div class='post-footer'>
              (or)
    <div class='post-footer-line post-footer-line-1'/>
             (or)
   <div class='post-footer-line post-footer-line-2'/>
             (or)
   <div class='post-footer-line post-footer-line-3'/>

5.Copy the code below. Paste the code just below the line you searched in step4.

<!--start related posts code Info : http://www.blogtipsntricks.com-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='btnt-rp'>
 <div class='social-bookmarks'>
  <h3>What&#39;s Next?</h3>
   <ul class='blogtipsntricks-social' id='blogtipsntricks-cssanime'>
  <li class='blogtipsntricks-facebook'>
    <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
 </li>
  <li class='blogtipsntricks-twitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>
 </li>
  <li class='blogtipsntricks-googlebuzz'>
    <a expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a>
 </li>
  <li class='blogtipsntricks-stumbleupon'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
 </li>
  <li class='blogtipsntricks-digg'>
    <a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>
 </li>
  <li class='blogtipsntricks-delicious'>
    <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
 </li>
  <li class='blogtipsntricks-linkedin'>
    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
 </li>
   <li class='blogtipsntricks-reddit'>
    <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
 </li>
   <li class='blogtipsntricks-technorati'>
    <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>
 </li>
 </ul>
</div>
<div class='related-posts'>
  <h3>Other Recommended Posts</h3>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir_AW-oc-75J11K3KFsYNgsxU31chKJMZ0zP8DdS4Sxxej6VNEFosrAdBtcFp9-tbdHCdYJ6OglHhhUlD2X31IlIZNvX3aR17r34I9AcHBlfxOHGAOWDsA-x4js1gT59OugZTkSCeCRULv/&quot;;
var maxresults=6;
</script>
<script src='http://yourjavascript.com/20110210123/related_post_with_hover.txt.js' type='text/javascript'/>
        <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>
</b:if>
<!--end related posts code Info : http://www.blogtipsntricks.com-->

6. That's it!!! Save your template. View the widget on your post pages.

Note: You need to view the post pages to view the widget. That is, click on any of the posts in your blog to view the final result. You cannot find them on the home page of your blog.

I hope you enjoyed this post and the widget as well!!! Please share your views about the widget via comments!!! We love to here from you. More over, you gain backlinks for your comments :)