Wordpress Style Responsive Related Posts Widget for Blogger

Related posts under each blog post can help your visitors navigate through the content that is mostly related to the topic they were search for. It therefore helps you keep your visitors engaged on your blog for more time than just go away with one page served. Technically speaking, related posts widget can help you reduce bounce rate on your blog.

Therefore to reduce bounce rate on your blog, I bring you a beautiful Wordpress style ‘related posts’ widget for blogger in this article.



To add this widget on your blogger add the following blocks of codes in the specified areas on your template.

Step #1: Log into your blogger account and go to your blog’s dashboard > Template >Edit HTML.

Step #2: Find the following line of code

]]></b:skin>

Step #3: Add the following block of CSS code right above the line specified in Step 2.

<--Wordpress Style Responsive Related Posts CSS code starts-->
#related-posts {
          margin: 1px 0px !important;
          background-color: #111;
          background-image: -moz-linear-gradient(#444, #111);
          background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
          background-image: -webkit-linear-gradient(#444, #111);
          background-image: -o-linear-gradient(#444, #111);
          background-image: -ms-linear-gradient(#444, #111);
          background-image: linear-gradient(#444, #111);
          height: 280px;
          width:100%!important;
          padding: 0px !important;
          box-shadow: 0px 4px 4px -4px rgba(0, 0, 0, 0.7) !important;
          border-radius: 5px 5px 5px 5px;
          overflow:hidden;
        }
        #related-posts h2{
          margin: 0px !important;
          padding: 10px !important;
          color: rgb(255, 255, 255);
          font-weight: normal;
          text-transform: capitalize;
          background-color: rgb(18, 18, 18);
          border-bottom: 1px solid rgb(0, 0, 0);
          border-top-right-radius: 5px;
          border-top-left-radius: 5px;
          background-color: #111;
          background-image: -moz-linear-gradient(#444, #111);
          background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
          background-image: -webkit-linear-gradient(#444, #111);
          background-image: -o-linear-gradient(#444, #111);
          background-image: -ms-linear-gradient(#444, #111);
          background-image: linear-gradient(#444, #111);    
          text-decoration:none!important;  
        }
        #related-posts a{
          font-weight:bold!important;   
          color: white;
          font-family: arial!important;
          border-right:0px!important;
          margin: 10px 0px 10px 10px !important;    
        }
        #related-posts a:hover{
          border-right:0px!important;
          margin: 10px 0px 10px 10px !important;
          background:none!important;
          text-decoration:underline!important;  
        }
        #related-posts img{
          border: 1px solid #666 !important;
          padding: 1px !important;
          width: 115px !important;
          height: 95px !important;
          margin-right: 15px !important;
          overflow: hidden;
          background:#444!important;  
        } 
        #related-posts img:hover{
          opacity:0.5;
        }
<!--Wordpress Style Responsive Related PostsCSS code end-->

Step #4: Now we have to position the ‘related posts’ in footer section of the blogpost. To do so find the following line of code at first.

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

Step #5: Now add the following block of code under the line specified in Step 4.

<!-- Related Posts with Thumbnails Code Start-->
                     <!-- remove -->
                     <b:if cond='data:blog.pageType == &quot;item&quot;'>
                       <center>
                         <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=5&quot;' type='text/javascript'/>
                           </b:loop>
                           <script type='text/javascript'>
                             removeRelatedDuplicates_thumbs();
                             printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
                           </script>
                         </div>
                       </center>
                       <!-- remove -->
                     </b:if>
                     <!-- Related Posts with Thumbnails Code End-->

Step #6: ‘Save template’ and check if its working on your blogger blog. Trace down the process carefully once more if you don’t find the widget under each post.

Comment below if need any help installing this widget on your blog. I’ll help to my best.