Spice Up Your Blogger Blog with Custom Designed Templates - BTNT Services!

New Stylish Related Posts For Blogger Blogs updated 2011

On By // 42 comments
Advertisement
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
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://lh3.googleusercontent.com/_FQCCkMjyvSA/TWoCU9DxctI/AAAAAAAAAHk/ZW-sgbYYWBs/thumb_missing.jpg&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 :)

42 comments:

  1. Thank you very much for this awesome widget. The relevancy of posts being showed is amazing (compared to the other widget I used previously).

    I did some modifications and I only use the related posts, without the bookmarking buttons. And may I ask something. Is is possible to resize the thumbnails? I've tried some tweaks on the CSS code, but it didn't work. Any clue will be much appreciated.

    BTW, if you need to look at the widget I placed, here is the link to my site MahaCopia.

    Thanks. :)

    ReplyDelete
  2. @BruNo BurNed
    You can change the image size in the javascript file.

    Here I have already changed the image size in the below js code. Just replace the javascript code in the widget with this code.


    <script src='http://yourjavascript.com/32320214123/related_post_with_hover.js' type='text/javascript'/>


    This .js file will change the image size to 100px

    Then you have set the image css as

    ul#related-posts li img {
    bottom: 0 !important;
    height: 120px;
    padding: 18px !important;
    width: 120px;
    }


    you have to replace the above piece of code with this code.


    ul#related-posts li img {
    bottom: 0 !important;
    padding: 5px !important;
    }


    Now your widget image will work correctly.

    I hope this will help you. Thanks for commenting.

    ReplyDelete
  3. Sweet! It works perfectly.
    Thanks a lot, mate. That's really a big help.

    ReplyDelete
  4. Hi. I have got a problem. My related posts are going vertical, can you help me how to make them horizontal? Which part of script do I need to change?
    Thanks a lot.

    ReplyDelete
    Replies
    1. same problem with me also ............

      try to do something

      http://studytipsandtricks.blogspot.in

      Delete
  5. @Cantiq
    I want to know the url of the webpage you added the widget.
    Then I can fix the error.
    Thanks for commenting :)

    ReplyDelete
    Replies
    1. looks some error in css coding...
      fix this problem...

      Delete
  6. Hi thanks for tutorial. I want to use related post only with large thumbnail image. can you send me the code, because i m not expert in coding. my site address is http://www.vidzpro.com

    kindly email me the code at [email protected]

    ReplyDelete
  7. hello :) there are a problem with this gadget in my template .. can you help me ..
    my e-mail : [email protected]

    ReplyDelete
  8. Somehow the social bookmark icons won't fit with the box. Please e-mail me. [email protected] I really need your help.

    ReplyDelete
  9. I found two same HTML codes (step 4) in my template where i have to place the codes then.. Pls help me..

    ReplyDelete
    Replies
    1. You can place this code below on any one of the 4 codes you searched in step 4.

      Delete
  10. This question is out of this post.. but can u help me out.. i'm unable to view more posts on other pages except first page can u help me out.. pls.. this is my link http://hdwallpapersthemes-pc.blogspot.in/search?updated-max=2012-10-13T23%3A06%3A00-07%3A00&max-results=4#PageNo=3

    ReplyDelete
    Replies
    1. By seeing your blogs home page I can understand you want to show 10 posts per page. To make it follow the steps below. :)

      Go to Your blog template HTML page now search for this code

      var postperpage=4;

      Replace the No 4 with 10 and save your template.

      Now you can see your post pages that shows 10 posts per page. :)

      Delete
  11. I only see thumbnails for my related posts. Can I get thumbnails and post titles under the thumbnail?

    ReplyDelete
    Replies
    1. Actually, you know what would be better? The post title showing up when the mouse is hovered over the image. You know, like img src="whateverpicture.jpg" title"Post Title shows when hovering over image"

      :)

      Delete
    2. Yes, you're right the title of the post has been shown when hovering the image. :)

      Delete
  12. Can u make them to show the title of the post by hovering the mouse over the image or else under the image.. Can u help me out..

    ReplyDelete
    Replies
    1. It's already designed to show the title when hovering the image. :)

      Just See the demo given in the article.

      Delete
    2. U r great Man.. :) Thank u very much..

      Delete
  13. It's not working for me. Why aren't the titles showing up? Here's my blog: http://costumingdiary.blogspot.com/

    I'm only using the second part (related posts) part of your code.

    ReplyDelete
    Replies
    1. Okay, I know what I did wrong. I didn't add this css code:
      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; }

      Thanks so much for responding and for providing this script. You are made of awesome.

      Delete
    2. Thanks. That's my pleasure. :)

      Delete
  14. ENGLISH
    hi i have installed this widget on 2 of my blogs would most like to know how to change the button for Google Buzz Google Buzz plus since died here in Brazil.

    PORTUGUÊS
    oi eu já instalei este widget em 2 dos meus blogs mais gostaria de saber como fazer para trocar o botão do Google Buzz pelo do Google plus uma vez que Buzz morreu aqui no Brasil.

    ReplyDelete
    Replies
    1. Hi you Want to Replace the Google buzz button with Google plus button.

      To make it follow the instructions given below.

      In the widget code search for

      http://i1203.photobucket.com/albums/bb382/chandeep10/social-bookmarking/blogtipsntricks-googlebuzz.png

      And Replace it with

      http://i1203.photobucket.com/albums/bb382/chandeep10/plus-icon-48x48_zpsfcef1dbb.png

      Then search for the following code

      <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>

      And replace the it with

      <a expr:href='&quot; http://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Google+'><strong>Google plus</strong></a>

      Now Save your code. That's all ;)

      Delete
  15. i can't do like that, it's not working :(
    http://www.elines.vn/ve-may-bay-di-thanh-hoa.aspx

    ReplyDelete
  16. It's happen to me, the related post is not showed on my blog, Can u help me.. plz
    look the preview http://pelajar-premium.blogspot.com/2013/07/menambahkan-sitemap-responsive-widget.html

    ReplyDelete
  17. How can I get the images to display at 150x150 instead of 72x72?

    ReplyDelete
    Replies
    1. In the widget code search for http://yourjavascript.com/20110210123/related_post_with_hover.txt.js

      Now in this javascript file search for 72px two times then replace it with 150px

      Delete
    2. I tried that before I contacted you. All it does is enlarge the image to 150px, but keeps the same pixelation as the 72px.

      I want the url to have the 150 in it so the image doesn't get blurry when expanded: "..../s150-c/....."

      There is a script that can change the source url from s72-c to s150-c, but I don't know enough javascript to be able to use it with your script. I know it can be done, as I use the script for my label pages. Here's where I got it:
      http://www.bloggerplugins.org/2011/09/post-thumbnails-for-blogger.html
      It's the third gray box down.

      Delete
    3. Oops!! Sorry I forget to mention about the CSS. You have the edit the size of the thumbnail in CSS along with the JavaScript.

      To make it search for ul#related-posts li a below that change the height and width :)

      Thanks...

      Delete
    4. Hm, that just stretches a 72px image to 150px. The image is blurry. What I want is the resulting image that shows is 150px to begin with.

      I'd like the script to call, for example, https://lh4.googleusercontent.com/-BXiE6_YDChQ/Uc7p6d0gHWI/AAAAAAAAFw8/pClp2tKmKzM/s150-c/sewing-tools-organizer.JPG instead of https://lh4.googleusercontent.com/-BXiE6_YDChQ/Uc7p6d0gHWI/AAAAAAAAFw8/pClp2tKmKzM/s72-c/sewing-tools-organizer.JPG

      I know this can be done (see link in my prior post), as I use it for my label pages, but I don't know enough about javascript to change the code on the related posts script.

      Delete
  18. This comment has been removed by the author.

    ReplyDelete
  19. This comment has been removed by the author.

    ReplyDelete
  20. I'm using your Zett template, but I can't get this to work.

    ReplyDelete

I Appreciate your valuable Feedback. So, Please DO NOT SPAM - Spam comments will be deleted immediately.

Don't use brand name in name field and you're not allowed to use links in comments unless it's necessary

Such Comments will be removed immediately.

Thanks,
Chandeep