Advertisement

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.

ALSO READ:  How To Cash Your PayPal Money Directly Into Your Bank Account With Xoom
Advertisment

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here