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.



    Do you like this post? Please link back to this article by copying one of the codes below.

    URL Of Post:


    HTML Link Code:

    BB (forum) link code:

    Comments

    1. well nice post, this is what i have benn looking for for alongtime to solve my problem, thanks

      ReplyDelete
    2. I used the code in my blog and its showing related post twice. Need help to remove one of it.
      blog.familymatterrs.com

      ReplyDelete
      Replies
      1. Hello Ruth,

        I've checked your blog to confirm the duplication in the widget. The error actually came from the code which i've made some corrections to. The last step given in this post 'step 4' search for that line of code again (the line of code given in step 4), follow the same guidelines in step 4 and take off the entire code in 'step 4'

        Delete
    3. Replies
      1. did you check your blog from a mobile device after adding the code in your template?

        Delete
    4. its appearing two times, each with 14 related posts. i have crossed checked everything.. stil
      check it Here

      ReplyDelete
      Replies
      1. You must have missed or ignored the instruction in the update to this post, which is 'SKIP STEP 4', that's why the widget duplicates. I could've easily taken out that line of code, but it's there for others who had previously added the code before its update, so they know how to retrace their steps and rectify the problem.

        Anyway, after checking out your blog, i didnt see the widget display more than once as youv'e stated above. Your comment looks like spam.

        Delete
    5. please is this code still working properly right now?

      ReplyDelete
      Replies
      1. Hi Trends,

        The code was last updated in June 2017, and yes it is working on blogger blogs.

        Delete

    Post a Comment

    Please share your views on this topic with Grace Joseph by leaving a comment.