Wanna Own A Blog Like This
For Questions, Inquiries, Click Here
Page | - Follow us - Call us - Hire Us - gurubasics@gmail.com
Download Our Android App HERE

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

==> 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;
}

ALSO READ:  How To Get 6GB With N1000 and 10GB With N1500 On Etisalat

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

Join GuruBasics Telegram Channel For your latest free browsing cheat, tech news, phone reviews, tutorials and many more by clicking HERE
Check out the REASONS why you should always comment on posts HERE
Download Our Android App HERE

Get Our Hottest Updates via SMS. Kindly SMS FOLLOW GURUBASICS to 40404. On Any Network. It Is Totally FREE. Download Our Android App From HERE
To Submit Your Guest Post Or Sponsored Article, Enter HERE. Click HERE To Our Join Telegram Group
wizytechs blog-bg
   

2 Comments

Leave a Reply

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