Add Related Posts Widget To Blogger Posts

Related posts Widget, as the title says , this Widget will generate the list of related posts. This Widget can be added either in homepage or inside the post. By placing the code of this related posts Widget, there is the chance to spread the other posts to visitors and they may have a tendency to take that post from the list, it will reduce the bounce rate of your website/blog and will keep your visitors from suddenly quit from your blog. Let's see how to add related posts widget to Blogger.

Add Related Posts Widget To Blogger

1. Sign In to Blogger Dashboard
2. Go to Template -> Edit HTML
3. Find </head> 
4. Copy the below code above </head>

<!--Related Posts with thumbnails Scripts Start--><b:if cond='data:blog.pageType == &quot;item&quot;'> /* remove this */<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'>vardefaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc8HllDtbrB_U_1xvf3ccI1TrUgxpfsZ2G9nbrV-BYIwADWSy6CQZaOIQjv260GheBJE3ymRUjjEPCL-eHk5DX0leO64CcAQTt1dE5vNH7b-6pOuaVa9u2XkdQJ3XhPNIn-sUW5PxFAXg/s400/noimage.png";var maxresults=5;var splittercolor="#DDDDDD";var relatedpoststitle="Related Posts";</script><a href="http://bloggingbooze.blogspot.com" style="font-size:0pt">Blogger Widgets</a><script src='http://netoopscodes.googlecode.com/svn/netoops-related-posts-with-thumbnails-blogger.js' type='text/javascript'/></b:if> /* remove this */<!--Related Posts with thumbnails Script End-->

• RED marked - remove red marked Text to add this Widget to Homepage
• Brown - place the URL of the image in quotes to display if there is no image in the post.
• maxresults=5 - change the value to change the number of posts you want to be displayed.
• splittercolor="#DDDDDD" - change the color of splitter between posts. 
• relatedpoststitle="Related Posts" - Change the title Name Of the Widget. 

I hope this will help you. Please like and share our blog. Thanks...

Share it Please

Tweet

c7sky

I'm Muhammad Touqeer,. I'm a freelance writer on topics related to Website Optimization (SEO), blogger customizations and making money online. I'm blogging since 2011.If you need help, feel free to contact anytime! Google and Facebook