HOW TO ADD RELATED POST WIDGETS ON YOUR BLOG

This is very interesting and very important trick for your blog.It allows user to find related post easily without any problem.It also boost your page views.Another advantage of it is that it help visitors to stay on your blog for long time by clicking on related posts.And they will view your interesting related posts.Its too easy all you have to do is to follow the steps given below.

*Login to your blog.

*Click on blogger dashboard and then click on templates.

*Now click on Edit HTML.

*Press (CTRL+F).

*Now search for </head>

*Now Copy the code given below.

*And Paste it above </head> Tag.

<!--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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkHFLPAXlfuDsjoDTa5rKzdspnMD3AH7Nj4R_BA9MEYJpRdLXlNdd-Ju9usnbXvHmDaqdZHTDySOKo48-WwOCFZ6aVfuD-Ht-Qk9dkZEEliYabSHd4uCIPe2gx4YS4wd9dEWHELlKrzlUk/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-->

*If you want to increase or decrease your number of post from 4 or more/less then you can change the value of var maxresults=4 to your desire number of value.

*If you want to display the Widget also on your home page then remove the orange script from the above code.

*Now search for the script given below.

<div class='post-footer'>

Note:The above script that is <div class='post-footer'> is 2 time in blogger templates.So please copy the code given below and paste it after each script that is <div class='post-footer'>

*Here is the 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://counterstriq.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixQkh8_Rok9pAgVQirH8QSzqb6pnYRwtQn7A5iYzLRv_93vxz6V1z3TvZ2H7XyINHlFV2d42fZaYze44OjHwvkblDTZmYhio7s4WR85-lzboN-SRY7x6EfULavjTSOe7tEASjNXN048kyQ/s1600/best+blogger+tips.png'/></a> </b:if></b:if> <!-- Related Posts with Thumbnails Code End-->

*Please change the name written in green with your blog name.

*If you want to display the related posts more than 4 then change the number of posts from 4 to your desire number of post.(Written in the script in red)

*Similarly if you want to show the related post widget on your home page then remove the orange script in the code.

*Now save the template and enjoy it.

*Please like.share and comments.Thanks.

Asad

Author & Editor