Friday, 27 December 2013

Stylish Related Posts With Thumbnails for Blogger

Showing related posts with thumbnail under your posts body is essential if you wish to increase your site pageviews. It also really helps to reduce bounce rate of your blog. Once your visitors finish reading your blog's great article, they will likely be keen to learn more regarding related posts. It's the best practice to indicate more related posts in blogger blog which help to increase reader engagement in looking at more posts and they will stay your blog for longer period. And should they stay on your blog for longer period then it will probably be a positive point to your site which really helps to improve its ranking in search engines since Google thought to be visit time being a ranking component. Let go ahead to add this widget into your site.

Note : You can see the live demo below this post on MBB Blog.

Unique Features:


  • Unique and stylish.
  • Large Thumbnail's.
  • Opacity hover effect.
  • Support All browsers.
  • Display most matching articles.

Adding Related Posts to your Blog:

  • Go To Blogger.com >> Your Blog >> Template
  • Now Backup your template.
  • Then select Edit HTML >> Proceed
  • Search for </head> and just before/above it paste the following code:
    <!--Related Posts with thumbnails Scripts and Styles Start-->
    <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    #related-posts h5{
    font-size:22px;
    text-transform: uppercase;
    font-family: &#39;Trebuchet MS&#39;,arial,serif;
    font-weight:bold;
    text-shadow: 1px 1px 0 #F2F2F2, 1px 2px 0 #B1B1B2;
    padding:10px 20px;
    margin:0;
    border-bottom:1px solid #cecece;
    }
    #related-posts {
    float: left;
    border: 1px solid #d2d2d2;
    width: 100%;
    }
    #related-posts img {
    width: 175px!important;
    box-shadow: 0 0 5px #D56540;
    }
    #related-posts a {
    width: 175px!important;
    color:#476CBB;
    }
    #related-posts a:hover {
    color: #000;
    text-decoration: underline;
    }
    #related-posts img:hover {
    opacity: 0.8;
    }
    </style>
    <script type='text/javascript'>
    var defaultnoimage=&quot;http://4.bp.blogspot.com/-8i2pC5j1WGI/Ubme9lrV5tI/AAAAAAAABc0/cKWUGpRq1Js/s1600/no_image.jpg&quot;;
    var maxresults=3;
    var splittercolor=&quot;#DDDDDD&quot;;
    var relatedpoststitle=&quot;Recommended For You::-&quot;;
    </script>
    <script src='https://googledrive.com/host/0B5td9UE6vZ75bnBMaGRXRHJaSlk' type='text/javascript'/>
    <!-- remove --></b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->

  • Now again Search for <data:post.body/> and just below/after it paste the following coding.
    /*--- MyBloggerBuzz.Com --- */
    <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=3&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-->

Now Save your Template and check your blog.
  • If you want to increase the number of posts to be shown then just search for max-results=3 in the above code and change the value.

Final Words:

I hope you successfully added this widget in your beautiful blog. If you feel any difficulty then let me know or share your views through comments. Keep sharing this post with your friends till then Peace, Blessings and Happy Relating.


No comments:

Post a Comment