Sunday, February 26, 2012

How to add Related Posts Widget in Blogger Blogs?

Friends in this post I am going to tell you that how you can add Related post widget in your blogger or blogspot Blog. As you can see I have got Related Posts widget placed at bottom of every post. You can do the same and don't worry you can adjust the color after placing it.
So Let me show you how:
1. Go and login to your blogger account.
2. From the dasboard click on "Design".
3. From there click on "Edit HTML".
4. Now press Ctrl+F and find </head>
5. Then paste the code provided below before </head>.
<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --><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%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:black; } #related-posts a:hover{ color:black; } #related-posts a:hover { background-color:#d4eaf2; } </style> <script type='text/javascript'> var defaultnoimage=""; var maxresults=5; var splittercolor="#d4eaf2"; var relatedpoststitle="Related Posts"; </script> <script src='' type='text/javascript'/> <!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->
6. After that press Ctrl+F again and find:
<div class='post-footer-line post-footer-line-1'>
7. Below that line add the code provided below:
<!-- Related Posts with Thumbnails 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> <script expr:src='"/feeds/posts/default/-/" + + "?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div><div style='clear:both'/> <br/> <a href="" target="_blank"><b>Grab This Widget</b></a> <!-- remove --></b:if> <!-- Related Posts with Thumbnails Code End-->
You can edit it as you want by making the changes in CSS:
1. If you want to add a border around it as you can see mine you will have you define border in it with colors or without colors.
2. You can also vary the number of thumbnails displaying below the post by changing "var maxresults=5;".
3. You can change the color of splitter line by editing this "var splittercolor="#d4eaf2";" And if you want no color on the splitter line then just place"none" instead of the color code.
You can also display this widget on every page not only the posts page. To do so just remove these line from both the code provided above:
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>


<!-- remove --></b:if>

Let me know you experience with this post in comments below. If you need any help then leave me a comment and I will reply here as soon as possible.



  2. Since the item is interested in anybody to advance, rivalry might be troublesome and will oblige you to be more astute about your advancements.



Recent Comments

Follow the blog

Join 500+ Members on Facebook