How To Add Related Post Widget To Your Blog

I stumbled upon this post on ogbongeblog and i felt it is right to share it here because many people have been asking me how i got to add mine. With this related post widget added to your blog, youll get to make your readers spend more time on your blog thereby helping to increase your blogs pageviews. Adding this widget to your blog is very easy as far as you follow this short tutorial on how to do that.

With this widget, a new related posts section will be shown below your post. The widget gets the related posts from the posts that have the same label as the current post.

Follow the steps below to add the related post widget

ALSO READ:  Kanu Nwankwo’s Wife Celebrates As She Bags Masters Degree

==> First of all Log in to your blogger dashboard
==> Go to Template> Edit HTML
==> Inside the HTML, use CTRL+ F to find the tag

Above , paste the following code

#related-posts {
float : left;
width : 350px;
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 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(http://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/s200/greentickbullet.png) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

//<![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(‘

    ‘);
    while (i < relatedTitles.length && i < 20) {
    document.write(‘

  • ‘ + relatedTitles[r] + ‘
  • ‘);
    if (r < relatedTitles.length – 1) {
    r++;
    } else {
    r = 0;
    }
    i++;
    }
    document.write(‘

‘);
document.write(‘[Get Related Posts Widget for Your Blog]‘);
}
//]]>

Click on save template.

After doing that, use CTRL+F to find any of the following codes

The Author

Imocheezy

Comments

Add a Comment
  1. Sir can u help me to do it because my PC is no more work

Leave a Reply

Your email address will not be published. Required fields are marked *