Add Attractive Stylish Related Post With Thumb For Blogger

Add Attractive Stylish Related Post With Thumbnails Widget For Blogger

Matched With Metro UI Style Blogger Template.
Smartlog Team Also Using it...

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.

 _____________________________________________________________
IF You Want 3rd Party Post Related + Thumbnails without know coding check out this post