Announcement:

  Hello, We Are Now Designing Blogger Awesome Template. Check Out At Netzspot.Blogspot.

Friday, March 8, 2013

Awesome "Related Posts With Thumbnails" Widget For Blogger

This Article Was Live On: Friday, March 8, 2013 And Till Now Have34 comments.
"Related Posts With Thumbnails" Widget For Blogger

After my previous post about Related Post text widget that are "Awesome Related Post Text Widget" and "Simple Related Post Text Widget", I am here with the new one that contain thumbnails also that will provide more awesome look and will insiste your visitor to view the rest of your posts. LinkWithIn is also popular for Thumbnail related post widget but you can not increase more then 5 and that will be visible on home page also and not provide you the customization also.

So here i have an alternative to that one that is also full customizable according to your desire, Displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails as shown in the image above. Now without any more preface, here we proceed right to the code afters seeing the awesome features below.

Features:

1.) Simple And Stylish Code.
2.) Quick To Load And Easy To Navigate.
3.) One Click Links.
4.) Will DecreaseYour Bounce Rate.
5.) Much Better For SEO.
6.) It Will Be Displayed Only On Post Pages.
7.) Awesome And Professional Look.
8.) Will Also Increase Your PageViews.
9.) Full Customizable CSS.
10.) You Can Also Increase Related Posts Counts.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To "Template".
4.) Click "Edit HTML".
5.) Now "Expand Widget Template".
6.) Click "CTRL+F" And Search For </head>
7.) Now Copy The Below Code And Paste It Before It.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {float:center;text-transform:none;height:215px;background-color: #f4f4f4; box-shadow: 0 0 0 1px white inset; -moz-box-shadow: 0 0 0 1px #fff inset; -webkit-box-shadow: 0 0 0 1px white inset; padding:5px;border: 1px solid black;  }
#related-posts h2{padding: 10px 15px; font-family: Helvetica, Arial; line-height: 1.1em; font-weight: bold; text-shadow: 0 1px 0 white; font-size: 20px; letter-spacing: -1px;color:#333; background: #E4E4E4; border: 1px solid white;width:auto;box-shadow: 0 0 0 1px white inset; -moz-box-shadow: 0 0 0 1px #fff inset; -webkit-box-shadow: 0 0 0 1px white inset;}
#related-posts a{color:#D80556;}
#related-posts a:hover {background-color: #D80556;color: white; font-weight: bold; text-decoration: initial;}
</style>
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=6;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

8.) Again Click "CTRL+F" And Search For

<div class='post-footer-line post-footer-line-2'></div>
<div class='post-footer-line post-footer-line-3'></div>
</div>
</div>

9.) Now Copy The Below Code And Paste After It.

<!-- Related Posts with Thumbnails Code Start-->
<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>
<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 style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

10.) Save And Done.


Customization:

1.) Change 6 With Your Desire Related Post Count.
2.) You Can Change Related Posts With Your Desire Text.
3.) If Your Post Have No Image, Then A Default Image Will Be Shown, To Change Default Image, Just Change http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png With Your Image URL.
4.) To Change Color, Size, Fonts, Padding Feel Free To Change CSS Code.
5.) Save And Done.

You Like It, Please Share This Article Using...




Don't Forget To Read This Also...



34 comments :

  1. Really an awesome widget with full customization. It will help to decrease the bounce rate also that will be helpful to better SEO. It will also attract the visitors to remain busy with our awesome articles. Thanks for sharing this with us. You have a collection of valuable widgets...

    ReplyDelete
    Replies
    1. Thanks For Your Comment, It's Very Helpfull To SEO As Well As Visitors Too...

      Delete
  2. SIR CODE IS NOT COPY THIS IS BLOKED HOW TO COPY CODE

    ReplyDelete
  3. Hey, Many Many thanks bro...its fully working ...Very Nice Collection of widgets

    ReplyDelete
  4. Nice work on my blog : www.wwevstnafans.blogspot.com :... bro can you tell me how can i change thumbnail size.....????

    ReplyDelete
    Replies
    1. No, It's Default In This Code, Be With Us To Get More.

      Delete
  5. I have seen most popular, recent posts or you might also like widgets. Do u have new posts widget which shows the newly published posts?

    ReplyDelete
    Replies
    1. If You Are Asking About Blogger, It's Officially BuiltIn Widget Available In Blogspot Platform. You Can Add It From There...

      Delete
    2. Well, the 'recent posts' gadget appears to be broken. Hence i can't add it on my blog. Do you have 'recent posts with thumbnails' gadget?

      Delete
    3. Ok, Be With Us To Get The Code Something Like This...

      Delete
    4. Ok. Thank You.

      Delete
  6. Great tutorial..This is exactly what i was looking for..I've tried various other plugins for no results..This is great..Thanks for sharing

    ReplyDelete
    Replies
    1. You Are Welcome To Visit Us And Leaving Your Review...

      Delete
  7. Sir, I cannot find the code in Step 8 in my Blog's Code.,what can be the reason? is their any other code in place of it.

    ReplyDelete
    Replies
    1. Only Search For 'post-footer-line post-footer-line-3' In Your Template...

      Delete
  8. Okay thank you very much for the widget, now its working..
    My Site for Games,softwares,movies,tricks and much more for free: www.faadugames.blogspot.com

    ReplyDelete
  9. Replies
    1. No, It's Only For Blogspot...
      Use Manual Related Links In Your Website...

      Delete
  10. very cool relted post plugin i need this style plugin for my wordpres blog you have any idea?

    ReplyDelete
  11. Awesome Collection and Customization..

    ReplyDelete
  12. "Expand Widget Template" does not appear on new blogger settings. please tell me what to do.

    ReplyDelete
    Replies
    1. Now After UpDate, First Search (id='Blog1') Then Expand It And After It Search (id='post') And Expand It Then Find The Above Code And Add Our Code Below IT.

      Delete
  13. Here's my blog address collegemarketing101.blogspot.com or email me macabantimarifel2013@yahoo.com

    ReplyDelete
    Replies
    1. AnyThing More Then Contact Us Freely...

      Delete
  14. Everything seems to be working except the images do not show in the related posts. I am new to Blogger so maybe I have overlooked something. I was also wondering if there was a way to assign an image to a post, without having to place in right in my post. Meaning I would like to see the image on the related posts but not in the middle of the post once I go to it.
    visit my blog
    download autocad 2004
    downloadsoftwaredownload
    Top 25 Google Adsense High Paying Keywords 2013
    downloadmoviesdownload

    ReplyDelete
    Replies
    1. Do You Have Images In Your Blog?

      *Don't Add Soo Many Link Next Time...

      Delete

Speak Your Mind:



Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.