Add Customized Related Posts Widget In Blogger

Related Posts plays an important role in interlinking blog post to get visitors to the posts with related topics.To make your visitors to visit your other related posts you have to make it visible for your readers.This widget uses a little of JavaScript to combine the posts present on your blog.You can also customized this widget to see it running below every posts.So follow these simple steps on how to add it in blogger.

1. Go to Blogger Dashboard>Design>Edit HTML.
2. Just above the </head> tag add the following code,

<!--RelatedPostsStarts--> <style> #related-posts { float : left; width:550px; margin-top:0px; margin-left : 5px; font : 11px Verdana; padding:5px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { color : #940f04; font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { color : #054474; font-size : 11px; text-decoration : none; } #related-posts a:hover { color : #0080ff; text-decoration : none; } #related-posts ul { list-style:none; padding:0px !important; } #related-posts ul li {         background: transparent url(http://3.bp.blogspot.com/_7wsQzULWIwo/SuM3oFg5zlI/AAAAAAAACHo/n5UluB5ugMI/s400/255.gif) no-repeat scroll 0px 6px;     margin: 0.3em 0 !important;     padding: 0 0 0.8em 20px; line-height : 2em; border-bottom:1px dotted #cccccc; } #related-posts ul li:hover{ background: transparent url(http://2.bp.blogspot.com/_7wsQzULWIwo/SuM3oYoTkRI/AAAAAAAACHw/Dig1etGrcpY/s400/251.gif) no-repeat scroll 0px 6px !important; } </style> <script language='JavaScript'> //<![CDATA[ var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break; } } } } function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i]; } } relatedTitles = tmp2; relatedUrls = tmp; } function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false; } function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 6) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0; } i++; } document.write('</ul>'); document.write('<a rel="dofollow" href="http://www.mybloggertips.com" style="float:right;font-size:10px;">Blogger Widgets</a></font>'); } //]]> </script> <!--RelatedPostsStops-->

1. Now find <data:post.body/> Use CTRL+F to find the code
2. Add the following code just below the above code,

<div id='related-posts'> <font color='<span style="color: #ffcc00;">#289728</span>' face='Arial' size='4'><b>Related Tricks:</b></font><font color='#ffffff'><b:loop values='data:post.labels' var='label'><data:label.name/><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&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div>

Customize Related Posts Widget

So here’s the customization of related posts widget,

1. You change the color of Related Tricks which is “#289728″
2. You can change the Text “Related Tricks” to any other you want.
3. If you want to display this widget only on post pages then add this tag at the starting of the above code,

<b:if cond='data:blog.pageType == &quot;item&quot;'>

and the below code at the end of the code above,

</b:if>

See the Example Here!

Lets say if you want to add this widget only on post pages then add the following code just below <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'> <font color='<span style="color: #ffcc00;">#289728</span>' face='Arial' size='4'><b>Related Tricks:</b></font><font color='#ffffff'><b:loop values='data:post.labels' var='label'><data:label.name/><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&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div></b:if>

Now it is your turn!

It’s your turn to help us grow.If this information seems useful to you kindly share your views by commenting here and like us on Facebook to get more updates.If you want to get news directly in your inbox just subscribe to our RSS feeds.Don’t forget to share Please.