Related Posts Widget With Thumbnail For Blogger andrey среда, 29 октября 2014 г. No Comment

Other than the popular post widget , the Related Posts Widget For Blogger/ Blogspot is also one of the best blogger widgets.  This is because it interlinks one post with several post having the same label as the post. The widget appears below each blogger post with thumbnails, which is easier to get the attention of your audience. Still wondering how to increase your blog's pageviews and reduce the bounce rate? then try out this related post blogger widget with thumbnails on your blogger blog. Two different codes are given below for the widget, copy only one into your template.

How to add related post widget to blogger/blogspot with jquery

Also Read: Sliding Recent Posts Widget For Blogger
                    Scrolling Popular Post Widget For Blogger
                    Square Popular Posts Blogger Widget With Rotating Effect 

How to Add Related Posts Widget In Blogger

CODE 1:

  • Goto your blogger dashboard.
  • Navigate to 'template', backup your template first.
  • Next, Click on 'edit html'.
  • Using Ctrl+f  keys, search for .  
  • Copy the code below and paste 'above' the tag




cond='data:blog.pageType == "item"'>




class='clear'/> style="font-size: 9px;float: right; margin: 5px;"> style="font-size: 9px; text-decoration: none;" href="http://www.detutor.com/2014/10/Related-post-widget-for-blogger-with-jquery.html" rel="dofollow" >Related Posts Widget




  • Save your template.View your blog to note the changes. Unsatisfied with the result? try out the second code for the related post blogger widget.
Also Read: Facebook Popup Like Box With Timer For Blogger
                   Numbered Popular Post Widget For Blogger
                   How to Customize Labels Cloud Gadget In Blogger

Related Posts Widget For Blogger With Thumbnails 

CODE 2:

  • Got your blogger dashboard
  • Navigate to template.
  • Click on 'edit html'.
  • Using ctrl + f keys search for this tag
  • Copy the code below and paste 'above'


    cond='data:blog.pageType == "item"'>










    Note: You can customize the code above by setting the minimum and maximum number of related post to be displayed. By default, these have been set to 3 and 3 respectively. You can also make changes if you want the thumbnails to be round. Simply edit the code by changing var roundImages = false to var roundImages = true. Ensure you include the semicolons after making the changes.
    • Save your template.
    Other than the popular post widget , the Related Posts Widget For Blogger/ Blogspot is also one of the best blogger widgets.  This is because it interlinks one post with several post having the same label as the post. The widget appears below each blogger post with thumbnails, which is easier to get the attention of your audience. Still wondering how to increase your blog's pageviews and reduce the bounce rate? then try out this related post blogger widget with thumbnails on your blogger blog. Two different codes are given below for the widget, copy only one into your template.

    How to add related post widget to blogger/blogspot with jquery

    Also Read: Sliding Recent Posts Widget For Blogger
                        Scrolling Popular Post Widget For Blogger
                        Square Popular Posts Blogger Widget With Rotating Effect 

    How to Add Related Posts Widget In Blogger

    CODE 1:

    • Goto your blogger dashboard.
    • Navigate to 'template', backup your template first.
    • Next, Click on 'edit html'.
    • Using Ctrl+f  keys, search for .  
    • Copy the code below and paste 'above' the tag




    cond='data:blog.pageType == "item"'>




    class='clear'/> style="font-size: 9px;float: right; margin: 5px;"> style="font-size: 9px; text-decoration: none;" href="http://www.detutor.com/2014/10/Related-post-widget-for-blogger-with-jquery.html" rel="dofollow" >Related Posts Widget




    • Save your template.View your blog to note the changes. Unsatisfied with the result? try out the second code for the related post blogger widget.
    Also Read: Facebook Popup Like Box With Timer For Blogger
                       Numbered Popular Post Widget For Blogger
                       How to Customize Labels Cloud Gadget In Blogger

    Related Posts Widget For Blogger With Thumbnails 

    CODE 2:

    • Got your blogger dashboard
    • Navigate to template.
    • Click on 'edit html'.
    • Using ctrl + f keys search for this tag
    • Copy the code below and paste 'above'


      cond='data:blog.pageType == "item"'>










      Note: You can customize the code above by setting the minimum and maximum number of related post to be displayed. By default, these have been set to 3 and 3 respectively. You can also make changes if you want the thumbnails to be round. Simply edit the code by changing var roundImages = false to var roundImages = true. Ensure you include the semicolons after making the changes.
      • Save your template.
      by Jillur Rahman

      Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.

      Follow him @ Twitter | Facebook | Google Plus

      No Comment