How to add related posts widget in blogger?
Hello friends. You all know that you can make the blog of your choice in Blogger. But can you edit it with your choice. Yes, you can. For that purpose you will have to make many changes in your template. For these changes, you can use our help and we make sure that you won't regret it ever. Now, if you want to add related posts widget on blogger. Then what you need to do is just follow these very simple steps:
3. Now find: class='post-footer-line post-footer-line-1'>
and replace it with<!-- Related Posts Code Start-->
var maxresults=5;
The last line is an extra and should not be saved in the widget. It is already in the code and tells the number of results for related posts.
We hope this works for you. Thanks for reading and keep coming:)
- Open your blogger account.
- Open the edit HTML option in layout. Just, tick in the box that says 'expand widgets'.
If you want to change the title of the widget then change : varrelatedpostitle="related post"
- Then find: </head> and replace it with: <!--Related Posts Scripts and Styles Start-->
<!--Remove--><b:if cond='data:blog.pageType == "item"'> <style type="text/css"> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts .widget{ padding-left:6px; margin-bottom:10px; } #related-posts .widget h2, #related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, “Times New Roman”, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:blue; } #related-posts a:hover{ color:blue; } #related-posts ul{ list-style-type:none; margin:0 0 0px 0; padding:0px; text-decoration:bold; font-size:15px; text-color:#000000 } #related-posts ul li{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsJf2NRiT85eBT0Q1hD157_dOEZTH9p2d5BkdA0u8mwV_xGmQ6H-vAsa_kxdgwLPvva42fQrD42hCw8XTx0rrCsXxoDDXnYWc5B95A2I5ZSYDIfvIynGw-lAbGYTGd5z2wSG0TDSIRBfY/s200/greentickbullet.png) no-repeat ; display:block; list-style-type:none; margin-bottom: 13px; padding-left: 30px; padding-top:0px;} </style> <script type='text/javascript'> var relatedpoststitle="Related Posts"; </script> <script src='http://blogergadgets.googlecode.com/files/related-posts-for-blogger.js' type='text/javascript'/> <!--Remove--></b:if> <!--Related Posts Scripts and Styles End--> </head>
3. Now find: class='post-footer-line post-footer-line-1'>
and replace it with<!-- Related Posts Code Start-->
<!--Remove--><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><a href='http://www.bloggerplugins.org/2009/08/related-posts-for-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget for Blogger" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script>
</div>
<!--Remove--></b:if>
<!-- Related Posts Code End-->var maxresults=5;
The last line is an extra and should not be saved in the widget. It is already in the code and tells the number of results for related posts.
We hope this works for you. Thanks for reading and keep coming:)
Tags: Blogger, Blogger Template, Blogging tips, Web designing


Subscribe to:
Post Comments (Atom)
Share your views...
0 Respones to "How to add related posts widget in blogger?"
Post a Comment