5 Sept 2012
RELATED POST WIDGET FOR BLOGGER
Labels:
BLOGGER POST TRICKS,
BLOGGER TRICKS,
BLOGGER WIDGETS,
FEATURED,
HOW TO D0,
PLUGINS,
SCRIPTCAMP
related post widget for blogger
 |
| related posts widget for blogger |
- Go to Blogger DashBoard -->Design --> Edit HTML
- backup your Template before making any changes to your blog
- Now Expand Widget Templates
- Find the code shown below using {ctrl+F}
- </head>
- copy the codes and paste it before/above it
<script type='text/javascript'>var relatedpoststitle="Related Posts";</script>
<script src='http://tricks2blogging.googlecode.com/files/Related-Posts.js' type='text/javascript'/>- suggestion ---find these codes first and then follow line1
- <div class='post-footer-line post-footer-line-2'>
- <div class='post-footer-line post-footer-line-3'>
- </div>
- </div>
- Now copy the below codes and paste it in your website where you want to show the related
<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=5"' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5; <!-- Increase To Show More Then 5 Related Post -->
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>- Find the code shown below using {ctrl+F}
- </b:skin>
NOw Choose Any 1 style
#Style-1
#related-posts {clear: both;}
#related-posts ul{margin: 20px 0; padding: 0;list-style: none;}
#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {padding: 10px;display: block;color: #222;text-decoration: none;cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */}
#related-posts ul li a:hover {padding-left: 20px;}
#related-posts {clear: both;}
#related-posts h2{color: #fff;}
#related-posts ul{margin: 20px 0; padding: 0;list-style: none;}
#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;background: #222;}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {padding: 10px;display: block;color: #fff;text-decoration: none;cursor: pointer; -webkit-transition: padding-left 250ms ease-out; -moz-transition: padding-left 250ms ease-out; /* trans pattern: property duration timingMethod delay */}
#related-posts ul li a:hover {padding-left: 20px;background: #111;}
