Related Posts Widget For Blogger

Related Posts Widget For Blogger,it would have been installed in your blog as for sure if you are using proffesional blogger templates designed by bloggers.But still some bloggers are not using it or are still using default designs by google.If you are the one who has doesn’t have related posts widget in your blog and want to add it in your blog then here is tutorial how to install this related posts widget to your blog.

Log in into blogger with your ID
Click Layout
Click EDIT HTML tab
Click Download Full template. Please back up your template first
Give a mark next to Expand Widget
Press Ctrl+F

Step 1 : Add the following css before ]]></b:skin> .

#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#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 : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(&quot;http://4.bp.blogspot.com/_v5IxGTiMTD8/S86tvMfnwNI/AAAAAAAABCo/L5mp8kwzf0I/s400/listarrow.png&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

Now search for <head> tag and add the below script before it.

<script type=’text/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 < 20) {
document.write(‘<li><a href=”‘ + relatedUrls[r] + ‘”>’ + relatedTitles[r] + ‘</a></li>’);
if (r < relatedTitles.length – 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write(‘</ul>’);
}
//]]>
</script>

Step 2 : Check expand widgets and search for <data:post.body/>

And place the below codes just after it:-

<!–RELATED-POSTS-STARTS–><b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div id=’related-posts’>
<font face=’Arial’ size=’3′><b>Related Posts: </b></font><font color=’#FFFFFF’><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&amp;max-results=5&quot;’ type=’text/javascript’/></b:if></b:loop> </font>
<script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if><!–RELATED-POSTS-STOPS–>

Edit the number in green in above codes to show how many related posts you want to show.

Now save your template.I hope this will work great for you.
Source:-Techiblogger

57 Comments

  1. Baby Kid Blogs March 12, 2009
  2. Anshul March 13, 2009
  3. blogtrix March 17, 2009
  4. Anshul March 20, 2009
  5. Anshul March 26, 2009
  6. Schmitzl March 31, 2009
  7. Anshul March 31, 2009
  8. Schmitzl March 31, 2009
  9. Dreamhomeforu April 2, 2009
  10. Anshul April 2, 2009
  11. Dreamhomeforu April 2, 2009
  12. fREE2Software April 8, 2009
  13. Anshul April 8, 2009
  14. Choco April 8, 2009
  15. Anshul April 9, 2009
  16. Peter April 10, 2009
  17. Anshul April 10, 2009
  18. fREE2Software April 15, 2009
  19. Anshul April 16, 2009
  20. fREE2Software April 16, 2009
  21. Anshul May 15, 2009
  22. Anshul May 15, 2009
  23. RiPPa June 3, 2009
  24. Anshul June 4, 2009
  25. tanuj verma June 20, 2009
  26. Anshul July 26, 2009
  27. Sar_Sy July 31, 2009
  28. Anshul July 31, 2009
  29. mp3hear September 28, 2009
  30. kelik October 21, 2009
  31. Anshul October 21, 2009
  32. Techno Primer November 25, 2009
  33. xhotnot November 27, 2009
  34. Anshul November 27, 2009
  35. Taimur Khan December 27, 2009
  36. KAOSAR March 3, 2010
  37. Anshul March 3, 2010
  38. l'administrateur April 18, 2010
  39. rationalbeing April 19, 2010
  40. Anshul April 21, 2010
  41. Swayam Das May 22, 2010
  42. Swayam Das May 24, 2010
  43. Anshul May 24, 2010
  44. Swayam Das May 25, 2010
  45. Swayam Das May 26, 2010
  46. Daniele Laco June 13, 2010
  47. Anshul June 13, 2010
  48. Alyson June 24, 2010
  49. queen j August 23, 2010
  50. Relizon September 25, 2010
  51. Neezhom May 22, 2011
  52. jayrweblog May 30, 2011

Leave a Reply