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:  Learn SEO: Meaning of important  SEO terms you should know. 

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:  Testing FAST Ways To Make Money Online

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:  How To Properly Add a Facebook Like box widget for Blogspot or Blogger Blogs

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

Related Articles

80 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!}

  2. I’ve been having issues with my Windows hosting. It has set me back quite a bit while making the next list. This is the current list that I have. I should add another list in less than a week. I’ll let you all know when the next list is ready. Thank you for your patience.

  3. Hey would you mind sharing whoch blog platform you’re
    working with? I’m planning to start my own blog in the near
    future but I’m having a tough time selewcting between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is becauee your design seems different then most blogs
    and I’m looking for something unique. P.S Sorry for being off-topic but I had to ask!
    porno recently posted…pornoMy Profile

  4. Very Nice post . Yes this this the right way for blog commenting . We should not do spamming through blog commenting . We should address the right information .

  5. I just like the helpful information youu supply in your
    articles. I will bookmark your blog andd take a look at once more right here frequently.

    I am somewhat certain I’ll be told lots of neww stuff right here!
    Good luck for the next!
    elitepartner recently posted…elitepartnerMy Profile

  6. Hello just wanted to give you a quick heads up.
    The text in your article seem to be running off
    the screen in Chrome. I’m not sre if this is a formatting issue or something
    to do with web browser compatibility butt I thought I’d post to
    let you know. The desdign and style look great though!
    Hope you get the issue solvd soon. Cheers
    lablue recently posted…lablueMy Profile

  7. Hi there, I discovered yoour site via Google at the same time as searching for a comparable topic, your
    site came up, it appears to be like good. I’ve bookmarked it in mmy googl bookmarks.

    Hi there, simply was aware of youur weblog via Google, and found that it’s truly
    informative. I amm gonna watfch out for brussels.
    I will appreciate for thoxe who proceed this
    in future. Many other folks migt be benefited from yor writing.
    Cheers!
    t shirt Printing services recently posted…t shirt Printing servicesMy Profile

  8. My spouse and I totally like your blog and find a lot of your articles to be precisely what I am interested in. Do you offer people to write material for you? I wouldn’t mind composing an article relating to luck patcher apk or on some of the things you write about on this site. Awesome information site!

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