TellForce Blog
Linking You To The Technology World

How To Enable Related Posts Widget For Mobile View in Blogger

Following my post on How to add Related Posts Widget with
thumbnails in Blogger, someone complained that the related post only works on
desktop, that he was unable to see it on mobile.

Now we are going to work on that now. However, before we
start, you will have to switch to blogger custom mobile template if you have
not done so. And if you have done that, lets ride on.
How To Enable Related Posts Widget For Mobile View in Blogger

It is a very simple procedure, you have done the bulk of it
in the previous post.
WARNING: Before you embark on this journey ensure you back up
your Template.

How To Enable
Related Posts Widget For Mobile View in Blogger

Step 2. Log in to your Blogger account and go to Template
> Edit HTML
How To Enable Related Posts Widget For Mobile View in Blogger
Step 3. If you yet to enable custom mobile template, simply click
here to do so and continue with
Step 4. Click anywhere inside the code area and press the
CTRL + F keys:
How To Enable Related Posts Widget For Mobile View in Blogger
Step 5. Search for the below code by copying and pasting it inside
the search box (hit Enter to find it):

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

Step 6. Cautiously look for the closing </div>
(as shown in the screenshot below):
How To Enable Related Posts Widget For Mobile View in Blogger
 Step 7. Then copy and paste the below code directly below
closing </div> as shown above:

<!–
Related Posts with Thumbnails Code Start–><b:if
cond=’data:blog.pageType == &quot;item&quot;’><div
id=’related-posts’><b:loop
values=’data:post.labels’ var=’label’><b:if
cond=’data:label.isLast != &quot;true&quot;’></b:if><script
expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name +
&quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;’
type=’text/javascript’/></b:loop><script
type=’text/javascript’>var
currentposturl=&quot;<data:post.url/>&quot;;var
maxresults=5;var
relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs();</script></div><div
class=’clear’/><div style=’font-size: 9px;float: right; margin:
5px;’><a href=’http://www.tellforceblog.com/’ rel=’nofollow’
style=’font-size: 9px; text-decoration: none;’>TELL-FORCE
Blog</a></div>

 Step 8. Save your template. 
Yes, you are done.

You can share your experience with us via the
comment box.

1 Comment
  1. zain ali says

    thanku

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More