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.

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.

<b:if cond='data:blog.pageType == "item"'>
<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, “Times New Roman”, 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, “Times New Roman”, 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="Related Posts:";
</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 == "item"'>
<div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script> </div> </b:if>

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