Adding related post widget on blogger blog mobile view

Blogger blog is one of the blogging platforms that give its users privilege to do whatever they feel like doing with their blog. It gives you room to edit your template, add whatever widget you feel like adding, they give you the opportunity to monetize your blog, no CPU usage to worry about, they even give you the opportunity to change your sub domain to a custom domain. I love blogger blog as much as I love wordpress but, blogger mobile view doesn’t give you the access to edit or change its codes. None of the widget/ gadget you add to your desktop view is going to show on your mobile view – hope you’ve notice that? But right now, there are some things you can add to your mobile view if you wish to, like how to add the related post widget I am about to show you on this post :).

related-post-for-mobile

If you want to keep your site healthy, using related post is a must for your blog. Having a related post widget is not hard, but in-case you have not started using the related post widget on your blogger blog, I will suggest you read this two (2) posts.

ADDING A COOL RELATED POST WIDGET TO YOUR BLOGGER BLOG

ADDING RELATED POST WIDGET WITH THUMBNAIL TO YOUR BLOGGER BLOG

Adding related post widget on blogger blog mobile view

Remember that before you can add the related post widget to your blogger blog mobile view, you must first have one on your desktop view. Now let’s roll to the main tutorial :).

Note: Please before you start playing with your blog codes, do backup your template so that you can revert anytime you make a mistake… to learn how to back up your blogger template, click HERE

Must Read: Adding A Drop Down Menu To Your MobilePress

Go to your blogger blog dashboard >>> Click “Template” >>> Click “Edit HTML”… and you’re in your html editor.

Now search for the below code.

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

Remember: To make the search easy click inside the code box and simultaneously press the CTRL + f key to bring out a search bar.

Have you seen the above code? Here is how the complete code looks like;

 <div class='post-footer-line post-footer-line-2'>

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

<div class='mobile-link-button goog-inline-block' id='mobile-share-button'>

<a href='javascript:void(0);'><data:shareMsg/></a>

</div>

</b:if>

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

<div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>

</b:if>

</div>

</div>

</div> 

Below the last </div> tag, Place the below code

 <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> 

Have you done that? Now click “Save template” and you’re done.

Note: This trick will work only to those bloggers who already have related post widget on their main blog. And do note that the codes are working 100% because it was given to me by my trusted buddy :).

Over to you

Now let’s make this post more interesting; do you believe that keeping your readers for long will engage your site even more? Are you using any related plugin or widget to keep your blog readers for long? If not, please tell us why by using the comment box below.

Must Read: 3 Major Reasons Why You’re Not Making Money With Google Adsense

Do you have questions, comments or thoughts you’d love to share with us? Then please do by using the comment box below. Remember that your comments, questions and thoughts are highly welcomed and most appreciated :).

Be Social

Was the post helpful? Then do click the like button, share us and recommend us to friends because you will never know who among your friends might be in need of a lovely post like this one :).

Do not forget to subscribe to our feed for your latest updates on the go. Have a blessed week start…

Don't Miss Any Post Again. Subscribe To Our Feed And Be Updated

Enter your email address below:

 

Powered by OnenaijaBlog

Comments

  1. Pramod says

    Hi Baba !
    Thanks for sharing the tutorial brother . I would try this out on my test blogspot blog .I had used linkwithin plugin when i was blogging with the blogger platform before but i didn’t show related posts on mobiles . Hence ,am excited to test this tutorial .

    • says

      Hey Pramod,
      Glad you liked the tutorial :). Yeah, it is difficult to add widgets to our blogger mobile view, but with little trial and error we can make our mobile view as good as we want :).
      Thanks for stopping by and dropping your comment, do have a great week ahead…

  2. says

    HI Babanature,

    Each time I read your posts about Blogger, I DO wish I had my blogs perhaps on that older platform as before :)

    I know we all love WordPress, and there can be nothing better than that, but there are some wonderful things on Blogger that WordPress doesn’t have either. I liked your little tutorial on how we can add related post widget on a blogger blog mobile view, wishing I’d known this long time ago – but it’s information many on Blogger can use for sure.

    Thanks for sharing. Have a nice week ahead :)

    • says

      Hello Harleena,
      Ahah… blogger is indeed interesting but believe me, its not as beautiful as wordpress :).

      Yeah, information as this is rare because it is not all bloggers using the blogger platform that do have this feature on their mobile view.
      Thanks for the comment Harleena, i do appreciate it. Have a nice week ahead :)

  3. Jeevan Jacob John says

    Nice tutorial, Babanature!

    How does Blogger integrate with mobile phones? My blogging experience with Blogger was quite some time ago; I don’t remember whether blogger really supported mobile phones. Does it now? (I know that now Blogger has better in-built responsive templates).

    I do appreciate the tutorial. Could be useful if I decide to start a blog on Blogger (I love Blogger, but WP offers a lot more features. Still, WP can’t quite outmatch Blogger in certain areas).

    Thank you once again :)

    • says

      Hello Jeevan,
      Ahhh… Yes, blogger blog has a mobile features now… but the only problem they have is, you can’t customize the mobile template to your heart desires :)

      Wp is indeed great when it comes to usability and mobility but in the search benefits, it can’t beat blogger :)
      Thanks for the comment and do have a wonderful week ahead…

  4. says

    Wow! buddy,

    this is definitely an awesome hack, I just wish that many blogger themes developers will start switching to responsive designs.

    Your styling sure provides great look, though I will still prefer a responsive site to a one that switches between themes on visit with mobile devices.

    It’s great reading your tutorial bro, do have a great day

    • says

      Hello Obasi,
      No matter how responsive a blogger template is, as long as you enable the mobile feature on your dashboard, your responsive templates features (most of the features) will be disabled once viewed on mobile. Except the mobile view is not switch on.
      Thanks for the comment and do have a nice week ahead :)

  5. says

    A very awesome tutorial Baba,
    Though I’m not so good with Blogger of which i think i have to start getting use to but, I’m sure this will help a lot of blogger users.

    Thanks for sharing and, have a great week.

    • says

      Hello Theodore,
      Blogger is also one awesome blog were you can simply create niche sites that can rank on search engines faster :). I so much love wordpress but blogger is also great for my niche sites.
      Thanks for stopping by and do have a wonderful week ahead :)

  6. says

    Related post widget is important tool to improve bounce rate. If people stay longer in our blog many business chance may appear.

    I am wordpress though but I believe it very helpful for those who uses blogger blog.

    Thanks for this post

  7. says

    Hi Babanature,
    I am very happy i dropped by at your blog today because i have been looking for a way to add this to my mobile template, Its good you shared this, am trying it out right now.

  8. says

    Hi babanature, Good tutorial to say, I got some of my blog design from your blog. Thanks for this again. I’ve been wanting to show related post like yours on my mobile blog and now I think I can.

    Word of advice; can’t you be using text field whenever it involves codes like this? It makes it easier a lot to copy it purely without some being altered… I think you should know what am saying…(Y)

    • says

      Hello Emmantope,
      Glad you find the post good enough to comment :). It will surely help your blog gain more engagement from your mobile readers…

      I do take your word of advice :). But i’ll assume that you’re commenting with your mobile phone right? The code is well placed on a desktop view and 100% easy to copy.
      Here is my own advice to you: If you’re a blogger, you should always use a pc to do all your coding works because mobile might ruin a code or two and might render your site useless…

      Thanks for stopping by and dropping your comment Emma, Do have a nice week ahead…

  9. Bello says

    Hello Baba,
    We all need something like this. This is indeed a big advancement to we ‘blogger blog’ users…
    Thanks for this and buy for now :)

  10. says

    Hello!
    I appeal to you because I see that you are skilled and can find the answer to this problem. img. .

    All my posts are found with duplicate meta descriptions and duplicate title tags. Link duplicate has to end? Modil m = 1 option. I searched in google but did not find anything to give results for this problem. I am curious if you know and that. Thank you!

  11. says

    Thanks! for the tutorial.

    Why you told that it will work only if Related post exist on desktop view. It is not working on my mobile view. Would you please give me the script required for implementing this only on mobile view.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>