How to Add Related Post Widget in Blogger Mobile Version

A post on how to add related post widget in blogger mobile version. The related post widget in the mobile version of your blogger blog can increase your blog's pageviews especially if a higher number of visitor/readers access your blog from their phone. Since this blogger widget displays related posts without the images, it does not affect page load time of your blog. It can also reduce your blog's bounce rate beacause there is interlinking of one post to other and your visitors don't leave immediately without checking out any other post on your blog. If your blog posts have been categorized using labels, then you can follow the guidelines below on how to add related post widget without thumbnails in blogger mobile version.


Also Read: How to Add IP Widget In Blogger Blogs
                   Numbered Page Navigation Widget For Blogger Blogs
                   Most Commented Posts Widget For Blogger With Thumbnails

How to Add Related Post Widget Without Thumnails In Blogger


Step 1
  • From your blogger dashboard,
  • Goto Template.
  • Click on the gear mobile settings icon 
How to Add Related Post Widget in Blogger Mobile Version

  • Select the button option, 'Yes show mobile template on mobile devices'
  • From the drop down menu, choose the option 'custom'
  • Click on 'Save' to enable your changes.
How to Add Related Post Widget in Blogger Mobile Version




Step 2

  • Next, Still in your template
  • Click on 'Edit HTML'
  • Using Ctrl+F keys, search for the tag  <b:if cond='data:top.showMobileShare'>
  • Below that tag, scroll down and find the last  </div> tag
  • Copy the code below and paste under the last </div> tag as shown in the image


<br>
<div style='float:left;'>
<!-- 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-->
  </div></br>


  • Save your template.

Also Read: Link to This Post Widget For Blogger
                   Add Stylish Custom Search Box To Blogger


Following the steps above, the related post widget without thumbnails should show up in the mobile and desktop version of your blog. If it doesn't, it's probably because you've not added labels in your blog posts.

    Author:

    Tech blogger, SEO expert, cryptocurrency enthusiast, and freelancer are the terms that describe me. I'll rather write a thousand words than speak hundred words, and that describes my passion as a content creator.