Blogging tipsblogspot guidesTraffic and Monetization

Here is How to add related posts widget to your blogspot blogs.

related post widget for blogger
related post widget for blogger

Blogspot/blogger users can now smile and heave a sigh of relief as I have discovered a simple and easy way to add related posts widget to blogger blog.

The related posts widget is very beneficial when it comes to increasing page views. say, when a user visits your blog to read a post on how to shop wisely for phones; having read that post and is satisfied he/she sees a post related to that titled, phones that you should buy in 2017. The user is very much likely to further investigate on that article. That way he/she spends more time on your website and is more likely to visit again.

example of a related post
example of a related post

Another important factor is that adding related posts helps improve your site’s SEO.

The ability to easily add and configure plugins is an added point in the favour of WordPress users.

Blogspot aka blogger users on the other hand have to do things manually by themselves. Which in my opinion is very beneficial to really learning HTML and other web programming languages.Free Search Engine Submission

Having known all that it’s time to add our very own related post plugin for BlogSpot blogs.

To do this we need to follow three precise steps before we can say that we have added our rellated posts widget for blogger blogs

important tip: BACK UP OUR BLOG: There is a slim chance that an error might occur during this process so its safer to back up our previous blog. By doing this we are being on the safer side, as it’s easy to restore our blog to its previous state.

To do this we log in to our blogger dashboard,

  1. Navigavate to template or theme
  2. click on back up/restore blog
  3. once safely backed-up its time to launch deep into the little more complicated part of our procedure.
Make time to read:  Asura-Hosting Affiliate Program: Make Instant Cash (100% Working)

Now from the edit theme widget, from there we

Carefully place your cursor in the area with code as shown above, type in Ctrl+f this is to show a search box tool .

  • in the search box type in “</head>” and then hit the enter button

right above the</head> paste this code

<!–Related Posts Scripts and Styles Start–>
<style>
#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(https://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;
}
</style>

<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>’);
document.write(‘<a href=”https://www.geekzone.com.ng/blog/related-post-widget-for-blogger” target=”_blank” rel=”dofollow”><font size=”1″ color=”black”>[Get Related Posts Widget for Your Blog]</font></a>’);
}
//]]>

</script>

<!–Related Posts Scripts and Styles End–>

Click on Save template

Make time to read:  Things to do before submitting an Adsense Application

Now use CTRL+F to find this line of code

<div class=’post-footer-line post-footer-line-1′>
OR
<p class=’post-footer-line post-footer-line-1′>

Now paste the code below immediately after any of these lines (whichever of them you could find): 

<!– Related Posts with Thumbnails Code Start–>
<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’><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>
<!– Related Posts with Thumbnails Code End–>

After that ,

Click on Save Template. this is so far the best way to add related posts widget to blogger blogs

Make time to read:  Facebook To Reveal the Dislike button: Here's what you need to know

Now, go ahead to view any of your blog posts. You should find the Related posts below it.

Note: If you did not add a label (category) to a post, you might not see the related posts below it.

Featured Posts For You To Read :

You can alter the CSS rules if you want to customize the look and feel

Feel free to share your welcomed  recommendations or questions via the comment form.

sharing is caring
Tags
Show More

Related Articles

3 thoughts on “Here is How to add related posts widget to your blogspot blogs.”

  1. Nice one thanks… But I have a question..
    You knw in a blogger blog… If u want to comment on a post, u must hv a Gmail or blogger account.. How can I do it that anyone can comment on a post.. I hope you get me bro….
    Pls get back to me through mail.. Thankz

    1. hello fawas in response to your query , i have some suggestions for you.
      first of all, in blogger blogs there are various options to choose from hen making a comment. this is the ‘comment as’ feature where you can choose what medium youll like to use to post your comment . this gives you the option to post a comment with your name, as an anonymous profile and so on. and so on. hope you are settled? kindly join our geek forum for blogger/blogspot users and post any blogger related question and be sure of getting ready and willing help. thanks.join geekzone forum here {a Nairaland strictly for geeks!}

Leave a Reply

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

GEEKZONE.COM.NG

Close

Adblock Detected

Please consider supporting us by disabling your ad blocker