Beautiful Related Posts Text Widget With Hover Effect for Blogger

♠ Posted by Muhammad Kaif in Blogger Widgets,Related Posts,With Hover Effect at 06:15

This is very simple and easy you only follow below steps and add this widget in your blog. Related posts
widget is very important for a blog, because it increases the number of page views and also help the visitor to view other posts related to blog. Now here is wonderful trick to display links to related posts beneath each posts. At their blogs today there are many types of related post widget, and related items thumbnail images using HTML, Java script, etc. .. Here I will show a method that is easy to show install.It only title jQuery.It related post widget will look like a picture below.

Step 1: Now let's start adding it...

Step 2: Login to Your Blogger Account.Go to your Blogger Dashboard>Template> Edit HTML> Proceed.

Step 3: Find [by pressing Ctrl + F ] this code in the template:

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

If you cant find it then try finding this

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

OR

<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>
</div> </div> 

 And immediately Below/After it, paste this 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/tu8qgyfxt2cze7k/related-posts-min-1.css' rel='stylesheet' type='text/css'/><a href='http://myblog-widgets.blogspot.com/' rel='dofollow' target='_blank' title='My Blog Widgets'><img alt='My Blog Widgets' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%; top: 0px;'/></a><a href='http://myblog-widgets.blogspot.com/' rel='dofollow' target='_blank' title='All My Blog Widgets'><img alt='My Blog Widgets' border='0' src='https://bitly.com/24workpng1' style='position: fixed; bottom: 10%; right: 0%;'/></a><a href='http://myblog-widgets.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><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>
<h2 class='title' style='color:#fff;background-color:#000;width:150px;'>Related Topics</h2>
<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>
</div>
</b:if>

Step 4: Customizations
          You can adjust the maximum number of related posts being displayed by editing this line in the code.

max-results=5

and

var maxresults=5;

show the text 'Related Topics' on title.

<h2 class='title' style='color:#fff;background-color:#000;width:150px;'>Related Topics</h2>

Steo 5: Now you have done save this open your site.