Antivirus|Multimedia Tools|Burning Tools|Internet Tools|Recovery Tools|Converter|PC Games|Full Version Software|Mediafire|Ebooks english...

Sunday, March 10, 2013

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.

simple Related post widget for your blogger (masterhacksindia.blogspot.com)

 

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 (master Hacks)-->

<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/AVvXsEgxeW4N1S0IkueM0SCK_0Ensny76AramTk3MvtSrx5n2h4izuxbs138uUzpTsJyUV3gmTd1NF-3t66zE8eZjqTHHMM9xokcoeAC2pT-YOw_b7OnMwjJiGXla8pP2RKYAvXseXhXygAu5ec/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/AVvXsEhyjHXL-CASV-UBV0qPWWp05cU-taEHAGOTWl-X4PGOueZ69u5Nyv0qlA6Fo7e-Uh1eNeW8IZBScKtrRrrt0gBKx6YKpwlqxangeMf66YvGURYW-Bzw2b4Yb9QavONJps-oquKlbLa9SQ0/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 (Master Hacks)—>

 

  • 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………………….

Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 comments

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© 2011 English Software Collection
Designed by BlogThietKe Cooperated with Duy Pham
Released under Creative Commons 3.0 CC BY-NC 3.0
Posts RSSComments RSS
Back to top