Simple Related Post Widget (With Mouse Hover Effect) For Your Blogger

Friends, Now i share a simple Related post widget for your blogger. It has a simple mouse hover effect. When mouse move over  to link , blue color changes into red color. You can also customize heading size and mouse hover effect. This is a simple vertical aligned Widget. After install it,You can see this below all posts. If you want to add it on your blog. Please read instruction carefully.


Log In to your Blogger dashboard.

• Go to Template Option.

• Click on Edit HTML .

• Tick Expand Widget Template option above

• Find (CTRL+F)  </head> tag.

• Copy and paste below code above </head> tag.

<!--Related Posts Scripts and Styles Start (techtoones)-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {float:center;text-transform:none;height:100%;min-height:100%;margin-top:30px; padding:0;}
#related-posts .widget{padding-left:6px;margin:10px 0 0 0;}
#related-posts .widget h2 {font-size: 17px;font-weight: normal;font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}
#related-posts h2{font-size: 17px;font-weight: normal; color:#580000; font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;margin-bottom: 0.75em;margin-top: 0em;padding: 2px 0 2px 0;border-top:1px #ddd dashed;border-bottom:1px #ddd dashed;}
#related-posts a{color:#0C9FE7;text-decoration: none;}
#related-posts a:hover{color:#ff0000;text-decoration: none;}
#related-posts ul{list-style:none; padding:0px !important;}
#related-posts ul li{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuZ0Tzzc-sSjOWSVWptn5lzCiK3dEvOCa1I5_J5Ib0vgBYRGbslmd5hKcSFseVuakDg13JsN-oI0WJ03rp3W0KvDYJGt9GhPeIfXg4fDT9vfr7iGPJhDsaJqEBBB-GF3OnLNz3AKgVQfo/s1600/a.png) no-repeat 6px 4px;display:block;list-style-type:none;margin: 0.3em 0 !important; padding: 0 0 0.8em 20px;line-height : 1.3em;text-decoration: none;}
#related-posts ul  li:hover{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEzp4GpVcIeoDxfH7kKkwVyNP_8uoc5XM9qjYssbtHoUw0V3ZIPKGDg9Tkb47AYAFdfxcTgqHY7411rM7x3dnamt4tjLzbRWE73RCYis_CF1yyMmzJ-dSrMVrux1EePW5Q6oyhuDznTTw/s1600/b.png) no-repeat 6px 4px !important;display:block;list-style-type: none;margin: 0.3em 0 !important; padding: 0 0 0.8em 20px;line-height: 1.3em;text-decoration:none;}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts:&quot;;
</script>
<script src='http://yourjavascript.com/25243611113/relatedpost.js' type='text/javascript'/>
  </b:if>
<!--Related Posts Scripts and Styles End (Techtoones)—>

• Then Find (CTRL+F)  post-footer-line post-footer-line-1 OR post-footer-line post-footer-line-2 OR post-footer-line post-footer-line-3 OR <data:post.body/>  and copy given below code and paste after one of above code.

<!-- Related Posts Code Start (Master Hacks)—>

<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=6&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>

<!-- Related Posts Code End (Master Hacks)—>

• Save your Template.

Leave a comment….. if this related post widget is not working………………….

Posted in: Blogs and Websites, Tips N Tricks, Tricks + Hacks