How To Add Related Posts Widget To Awesome Inc Blogger Template - Be Informed And Earn Be Informed And Earn: How To Add Related Posts Widget To Awesome Inc Blogger Template

Tuesday, February 28, 2017

How To Add Related Posts Widget To Awesome Inc Blogger Template

Related posts widget is one of the most important widgets a blogger can add to his or her blog. It keeps your readers engaged in your blog by displaying articles related to the current on they are reading or just read. When that happens, you will notice an increase in the amount of the time users spent on your blog. It also shows a reader post(s) which he or she missed in the posts.


related post widget to Awesome blogger template

Now, adding a related posts widgets can be a bit challenging for newbie bloggers, especially the ones who have no money to purchase a customized third party blogger template. But not to worry, if you are a newbie blogger looking for a way to add related posts widget to your Default Google Blogger Template, then you are in the right place, as this post will guide you on the simplest way to achieve that.

Recommended For You: Add 728 by 90 Leaderboard Ad to Blogger Default Template

Just Set your mobile Template to Custom then follow these guides below.

1.    Login to your blogger dashboard

2.    Navigate o Template, then click on Edit HTML

3.    Download this HTML code to your PC then open it.

4.    Once your blog's source code opens, press Ctrl+F on your keyboard to open the search bar. Copy and paste this code </head> inside the search bar and press enter.

4.    Now copy and paste the code you downloaded earlier directly above </head>

5.   To make the to make the related posts visible on Mobile, copy and paste the blow code, directly below the first <div class='post-footer-line post-footer-line-1'>

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

6.    To make the related posts visible on PC, copy and paste the same above code, directly below the second <div class='post-footer-line post-footer-line-1'> 

7.    By adding the codes in different places as illustrated above, you will have the opportunity to display different numbers of Related posts in mobile and PC. For instance, I have set my number of related posts on mobile to be 5, and 12 on PC.


related post widget to Awesome blogger template


Finally, this method will work flawlessly if you are using Techvillz.com customized blogger template. If you are using Google default template (Awesome Inc or Simple). just set your mobile template settings to Custom, give this a shot and then share your testimony. If you encounter any issues, tell us via comments, and you will be assisted.

8 comments:

  1. Yes, this was really helpful to my website, It worked on my blog omegaglory.com and that is what am really using now, Also its faster and easier to compare to the one I saw in Ogbonge blog.

    ReplyDelete
  2. Thanks for the testimony... I am glad it worked for you.. kindly invite your friends... cheers!!

    ReplyDelete
  3. Just did it now on my blog,,,this article is very helpful......

    ReplyDelete
    Replies
    1. Glad it worked.. feel free to share with others

      Delete
  4. Thank you so much, it's really helpful.

    ReplyDelete
  5. Thx worked perfectly! Just one more request plz how to edit the max number of related posts to be shown?

    ReplyDelete
    Replies
    1. look for this code,
      related_results_labels&max-results=5"'

      and then change the number "5" to any number of your choosing

      Delete