Adding Simple Related Post Widget on Blogger Blog

Adding a related post widget on blogger blog is one way of doing internal linking in our blog. Internal linking means building links on a page of a domain targeting another page of the same domain. It is one of the best SEO strategies that being used by most bloggers. It is a way of spreading the link juice throughout our pages which is good for SEO and in building site’s architecture. By doing this we also allow Google crawlers to see the different posts on our site.

Placing this related post widget on our blogger blog will also help our visitors navigating our site and it can encourage them to explore more posts. It is also a way of eliminating bounce rate of our site because the widget simply choosing articles that are in the same category or articles that related to the page. Sad to say, blogger blog does not have a default related post widget. However, we can make and put it manually by doing the simple steps below.

• Go to blogger dashboard
• Go to Template and click Edit HTML
• Now search the </head> tag (Press Ctrl+F on your keyboard and type </head> and hit enter to search) 
• Just before the </head> tag copy and paste the following codes provided below

<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>
.related-post-title{font-size:2.3em;margin: 5px 0px;}
#related-posts {margin: 0px 5px;}
#related-posts a {font-size: 1.1em;color:#970E0E;text-transform: capitalize;}
#related-posts a:hover {text-decoration: none;color: #555;}
#related-posts ul {list-style-type: none;padding: 0px;color: #000000;}
#related-posts li {  padding: 0.7em 1.2em;border-bottom: 1px solid #E2E2E2;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKoNeUEbUCMs_-P8u_-VYQth4jHRRvobWfPC6LzslV7b0Lo9UxyZXN3HNf_RsWKd_iQSsIJJjFn2hT02SE7pbBBWZ2da_g1v7cSBAz7pNXQyv-O6I0Ch7Z1DrnkRNIbod9uRIzXmg58ks/s1600/Arrow.png).2em 1em no-repeat;}
#related-posts li:hover {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKoNeUEbUCMs_-P8u_-VYQth4jHRRvobWfPC6LzslV7b0Lo9UxyZXN3HNf_RsWKd_iQSsIJJjFn2hT02SE7pbBBWZ2da_g1v7cSBAz7pNXQyv-O6I0Ch7Z1DrnkRNIbod9uRIzXmg58ks/s1600/Arrow.png).2em 1em no-repeat #E7F0FF;}
</style>
   <script src='http://aireshalili.github.io/internetsmash/simple-related-post.js' type='text/javascript'/>
</b:if>

Customization: You may change the font size of an item on this related post widget by changing the value of 1.1em. I choose em as a unit of measurement for responsive design purpose.

• Search <div class='post-footer'> code (Use again Ctrl+F. You may see this code twice, but you should stop on the second)
• Just above this code, copy and paste the codes provided below

<!-- Ralated post Start --> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'><h4 class='related-post-title'>You may also like</h4><b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script></div> </b:if> <!-- END Ralated -->

Note: The default number of post shown on this widget is 5. You may change it by changing the 5 value from max-results=5.