How To Make or Configure Your Related Post Widget To Display/Show On Blogger Mobile View

In my previous post I shared with you on how to Add Related Post Widget Below Every Post on Blogger, which I believe you have done by now. Today, I have another interesting post on how to make or configure your related post widget to display via mobile view. I have received mails from some blogspot/blogger users, asking me how I make the related posts widget to appear on the mobile view of my blogger blog. 

All thanks to Ogbongeblog, for leading me the right way. All you will just need to do is to carefully add some few lines of code to your blog's html.

Note: To get this done you have to switch to blogger custom mobile template. 

How To Get Started

==> Add or install related post widget to your blog, Click here to install related posts widget

==> If you have not enabled custom mobile template, login to your Blogger dashboard, go to "Template". Under "Mobile", select "Yes. Show mobile template on mobile devices" and choose "Custom" from the "choose mobile template" dropdown box and save your settings.

==> To achieve the purpose of this post you need to find the code for the default mobile share buttons so that you can place the related posts gadget directly below it.

==> Now, back up your template and go to "Template" > "Edit HTML"

==> Click inside the HTML and use CTRL F to find this code below

<b:if cond='data:top.showMobileShare'>

==> Carefully find the ending </div> as seen in the screenshot below

==> Now directly below it (i.e </div>), copy and paste the code below:

<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

==> Go to your blog homepage, view any blog post that has labels and you should see related posts links appearing right below the mobile share buttons.

Note: If you did not add a label (category) to each of your post, you not see the related posts below it. So make sure you label (categories) each of your blog post. Read How to create a Blog: Blogger Getting Started Guide, it will really help you.

Hope it work for you? Please, let me hear from you via comments box below.