How to Add Related Posts Widget for Blogger (Hover Effect)

Related posts widget is a very essential for a blog, related posts widget increases the number of page previews and also helps the visitor to find out the other posts related of your blog. Today I share some awesome trick. How to add related post in your blog every post under section. Here I will mention a process that you can easily add it.

 

 

 

 

Process to Add Related Posts Widget for Blogger:

01. Go to the bloggerAccount.

02. Back Up your template.

03. Go to HTML>> Edit HMTL

04. Find out  the below code (By Press Ctrl+F)

 

 

 

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

if you not find out it search below any code

<p class='post-footer-line post-footer-line-1'/>
Or
<div class='post-footer-line post-footer-line-2'/>
or
<div class='post-footer-line post-footer-line-3'/>

 

 

 

And immediately Below/After it, paste this below code:

<script src="http://dl.dropboxusercontent.com/s/c65xwzi0gc8z906/related-posts-min-1-ycode.js" type="text/javascript"><link href='http://dl.dropboxusercontent.com/s/c3dxmn7zvpf9352/related-posts-min-5.css' rel='stylesheet' type='text/css'/><a href='http://techshout-bd.blogspot.com/' rel='dofollow' target='_blank' title='Blogger Tips And Tricks'><img alt='Blogger Tips And Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%; top: 0px;'/></a><a href='http://techshout-bd.blogspot.com/' rel='dofollow' target='_blank' title='Latest Tips For Bloggers'><img alt='Latest Tips For Bloggers' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%;'/></a><a href='http://techshout-bd.blogspot.com/' rel='dofollow' target='_blank' title='Latest Tips and Tricks'><img alt='Latest Tips and Tricks' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; left: 0%;'/></a><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 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>
<h3 class='title' style='color:#fff;background-color:#0066FF;width:100px;'>
Related Topics</h3>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5; <!-- Increase To Show More Then 5 Related Post -->
removeRelatedDuplicates(); printRelatedLabels();
</script>

 

External Customizations:

You can change the maximum number of related posts being displayed by editing this line in the code. var maxresults=5; show the text 'Related Topics' on title.

Now you job is done
Save Template & Enjoy Happy Blogging...

>>If any one face any problem comment below comment box..