Related Posts With Thumbnails In Blogger Post


Visitors who come to one of our posts is probably not going to browse for another post after they already found what they've been looking for. Most of them came after the search result shows something related in our post and will close our page after they finished reading it.

The question now : How to make them stay a little longer in our blog ? In other words, We want them to read another post to make them stay for more.


Others beside the popular posts or the post labels is the related posts reference that will keep them stay. If you put another interesting post for them right after the post, They might be interested to click the post link.

The related post i'm going to show you is the widget that will show the thumbnail of the post as well as the post title.


Here's how you create it :

  • Log in to Blogger.
  • Go to the dashboard > Template > Edit HTML > Proceed
  • Tick Expand Widget Templates.
  • Use the Ctrl+F function to find this code :
</head>
Copy and paste the below codes right BEFORE the </head> 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 {
    float:center;
    text-transform:none;
    height:100%;
    min-height:100%;
    padding-top:5px;
    padding-left:5px;
    }

    #related-posts h2{
    font-size: 18px;
    letter-spacing: 2px;
    font-weight: bold;
    text-transform: none;
    color: #5D5D5D;
    font-family: Arial Narrow;
    margin-bottom: 0.75em;
    margin-top: 0em;
    padding-top: 0em;
    }
    #related-posts a{
    border-right: 1px dotted #DDDDDD;
    color:#5D5D5D;
    }
    #related-posts a:hover{
    color:black;
    background-color:#EDEDEF;
    }
    </style>
    <script type='text/javascript'>
    var defaultnoimage=&quot;http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg&quot;;
    var maxresults=4;
    var splittercolor=&quot;#DDDDDD&quot;;
    var relatedpoststitle=&quot;Related Posts&quot;;
    </script>
    <script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
    <!-- remove --></b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->
The default image will be the image from your individual post, You don't have to change anything for the post thumbnail.

But you can replace 4 from var maxresults=4 with your own value. This value indicates the amount of related post that will be shown after your post.

  • Now use the Ctrl+F function again to find this code :
    <div class='post-footer'>
 *This code will be available for your editing only if you Tick the Expand Widget Templates. Please make sure you already did this.

Copy and paste the below codes right BEFORE the <div class='post-footer'>
code :


     <!-- Related Posts with Thumbnails Code Start-->
    <!-- remove --><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=4&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'/>
    <!-- remove --></b:if>
    <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
    <a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best blogger tips.png'/></a>
    </b:if></b:if>
    <!-- Related Posts with Thumbnails Code End-->
Replace the above value marked with red with your value again for related post amount and save your widget.




Xsite Pro

Also from Amazon :   
      1,000 Creative Writing Prompts : Ideas for Blogs, Scripts, Stories and More
      When you finally have the opportunity to sit down and write, you want absolutely nothing to get in your way. In an ideal world, the ideas would flow from head to pen quickly and easily. You would have thousands of ideas at your fingertips. This new idea-generating book makes that dream a reality.

      Becoming A Blogger: How to Start a Blog This Afternoon and Make Money From Home For Years to Come (Make Money Online)
      Some bloggers make small, part-time incomes that supplement their full-time job. Others are making blogging their sole pursuit and earning a huge income each month. Blogging can be a big thing or a small thing depending upon how much time and energy you invest into your new venture.

      Other Great Stuffs : 

      Celebrity Blogging
      Discover The Secrets To Setting Up Your Own Personal Blog For MASSIVE Brand Building... And Build A Name For Yourself That People Will Know, Like And Trust!

      If You Have A Few Hours Per Week, Then We Can Show You How To Earn Significant Income With Your Own Blog! Step by Step. Click to find out !
      Know how to find a great market niche and write a successful blog? Great, you don’t need the steps within each of these components. Know how to design the web page and overcome technical difficulties? No? No problem, Here is a deeper level of instruction for that!

      Struggling to make money online? It's about to get quicker and easier than ever before...Click here !
      How JUST One Of The Blogs I Create During By The Forth Month Has Already Netted Me $2,537.29

      1500 MB of disk space, 100 GB of data transfer, PHP and MySQL support with no restrictions, cPanel control panel, Website Builder, Absolutely no advertising ! Join now : CLICK HERE !

      Read books on your computer or other mobile devices with FREE Kindle Reading Apps.



      ?max-results=10">');

      ?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");