Blogger Related Posts Widget with Thumbnails

Blogger Related Posts Widget with Thumbnails

Blogger Related Posts Widget with Thumbnails

Blogger related posts widget with thumbnails – There are many ways to endure your blog visitors for long to read your blog, one of which way is to place related posts widget with thumbnails.

By placing related posts widget with thumbnails, at the end of your posts, then the chances of your blog visitors will be more interested to read  other articles.

Add Related Post with Thumbnails on Blogger

Here are the steps to add related posts widget on blogger:

1. Please login to blooger using your ID
2. Click Design
   
   
3. Click Edit HTML tab
   
4. Please backup your template first then click Download Full Template
5. Check the small box next to Expand Widget Template
   
   
6. Find the code: </head>
7. Delete the code above and  replace with 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 { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:black; } #related-posts a:hover{ color:black; } #related-posts  a:hover { background-color:#d4eaf2; } </style> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Qcr2pTk6ckOhCmWwYK-ViQ97XzFs-G3b34y93y2GXVZHhVtuRCVg71GTdNtGWZk1Zl-tk5N10U_vjfyrU_XCEupE4XAB7OvcoJVekdbb_o8IXPaflGIfbRLtRh9hmqwrNQ5bNAovcEo/s400/noimage.png"; var maxresults=5; var splittercolor="#d4eaf2"; var relatedpoststitle="Related Posts"; </script> <script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/> <!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End--> </head> 

8. Then find the code:

   <div class='post-footer-line post-footer-line-1'> 

   Or sometimes like these:
   

   <p class='post-footer-line post-footer-line-1'> 

9. Paste the following code right under the code before:

   <!-- 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=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'/> <!-- remove --></b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a> </b:if></b:if> <!-- Related Posts with Thumbnails Code End--> 

10. Click Save Template
11. Finish and please to check the result.

Related posts widget has explained above will show up at the end of each posts page and not at the front page. If you want it appears at the front page, then you just need to delete the following code:

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> 

And code

<!-- remove --></b:if> 

Customize  related posts widget

There some needs to be customized from related posts widget with thumbnails above, among them are:

var maxresults=5; 

The code above is to display the number of related posts that appear, to change the number, just replace the digit of 5 with another digits.

var relatedpoststitle="Related Posts";

By default, related posts widget which appear will titled as Related Posts as shown in code above, but the text can be modified as you like, e.g: You might also like, or other words.

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Qcr2pTk6ckOhCmWwYK-ViQ97XzFs-G3b34y93y2GXVZHhVtuRCVg71GTdNtGWZk1Zl-tk5N10U_vjfyrU_XCEupE4XAB7OvcoJVekdbb_o8IXPaflGIfbRLtRh9hmqwrNQ5bNAovcEo/s400/noimage.png";

If there is no image on your posts, then related posts widget will appear default image which contain text No image. Image can be changed by changing the image address.

var splittercolor="#d4eaf2";

Code #d4eaf2 is the color code of between posts border line. You can change it with other colors.

Good Luck!!!!!

Credits: Related posts widget with thumbnails above was created by Blogger plugins

Blogger Related Posts Widget with Thumbnails