How I Added Related Posts Widget on My Blogger Blog?

• Tweet
• Email

• Tweet
• Email

Its no need to say, how important related posts are for your blog.  In this article I’m going to show you how I installed ‘Related Posts’ widget in my blog ICT Trends.

Contents:

Acknowledgement
Preview
Procedure
Additional Configurations
Annex
     Annex 1: Style Sheet Definition
     Annex 2: Widget Code

Acknowledgement

Let me acknowledge Aneesh and his blog ‘Blogger Widgets’ who taught me to implement it for my site. I’m sharing what I learned from him among you all.

Preview

Procedure

1. Log on to your blogger account and navigate to Layout >> Edit HTML.
2. Enable “Expand Widget Templates” check box.

3. On your template code, search for </head> and replace it with the code in Appendix 1 : Style Sheet Definition
   

4. Now, search for the line of code that contains class=’post-footer-line post-footer-line-1′. In my template I found the following line. Your template might use P tag instead of DIV tag.
                    <div class=’post-footer-line post-footer-line-1′/>
5. Just below that line add the code in Annex 2: Widget Code
6. Great! You’re done. Now save your template and view blog.

Additional Configurations

1. var maxresults=5;
   Change the number 5 to modify the number of related posts to show.
   
2. var relatedpoststitle=”Related Posts”;
   Change the title if you wish.
3. Modify the values in CSS definition to further change the color and look

Annex

Annex 1: Style Sheet Definition

<!--Related Posts with thumbnails Scripts and Styles Start--><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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/></b:if><!--Related Posts with thumbnails Scripts and Styles End--></head>

Annex 2: Widget Code

<!-- Related Posts with Thumbnails Code Start--><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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a><script type='text/javascript'>var currentposturl=&quot;<data:post.url/>&quot;;var maxresults=5;var relatedpoststitle="Related Posts";removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs();</script></div><div style='clear:both'/></b:if><!-- Related Posts with Thumbnails Code End-->

As always I’m looking if this tutorial is helpful to you and could you add one to your blog? Feel free to leave comment as I always welcome.