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.
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 below code, directly below the first <span class='post-comment-link'>
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<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 != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' 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 above <div class='post-footer-line post-footer-line-3'>
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. To change the number
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.
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 below code, directly below the first <span class='post-comment-link'>
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<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 != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' 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 above <div class='post-footer-line post-footer-line-3'>
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. To change the number
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.
PLACE YOUR MID-POST ADS CODE HERE FOR pc
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.
ReplyDeleteThanks for the testimony... I am glad it worked for you.. kindly invite your friends... cheers!!
ReplyDeleteJust did it now on my blog,,,this article is very helpful......
ReplyDeleteGlad it worked.. feel free to share with others
DeleteThank you so much, it's really helpful.
ReplyDeleteYou welcome buddy
DeleteThx worked perfectly! Just one more request plz how to edit the max number of related posts to be shown?
ReplyDeletelook for this code,
Deleterelated_results_labels&max-results=5"'
and then change the number "5" to any number of your choosing