How to make Blogger widgets visible in Blogger Mobile template (make Adsense visible in mobile template)?


In Blogger, the view on desktop computers and mobile devices are show differently. By default, the template on mobile devices are stripped down and responsive. Not all sections or widgets displayed on desktop computers are available on mobile devices. Most widgets manually added to Blogger will not be view-able on mobile devices. Adsense added from Blogger's Adsense widgets are visible however their display regions are only on the top and bottom of the page. Google Adsense code if added to the blog using Blogger HTML/JavaScript widget, it won't display on mobile devices. In order to show widgets visible only on desktop to also show on mobile devices, including Google Adsense widgets, do the following changes.

How to enable widgets to display on mobile devices?
First, let's add a Blogger widget our self. Let's say we want to display a custom labels block.
  • Login to Blogger and click click on Layout
  • Click "Add a gadget" and choose "Labels"
  • Instead of all, let's select only a few labels to show.
  • Save the widget.
  • Check whether it appears on desktop (it should). 
  • Check whether it appeared on mobile (it won't).
To display Blogger widgets view-able on desktops to also appear on mobile devices, do the following:

1. While still logged in to Blogger, click on Template / Theme, and then on Edit HTML
2. From the "Jump To Widget", click on the widget you are interested in (the newly added widget will usually have a higher number. eg: HTML15).

We'll come to a code that looks like the one below:
<b:widget id='Label1' locked='false' title='Categories' type='Label' visible='true'>

To show this widget on mobile devices, just add "mobile='yes'' to the above line. So it now looks like:
<b:widget id='Label1' locked='false' mobile='yes' title='Categories' type='Label' visible='true'> 

Repeat the above steps for any other widget which you would like to display on mobile devices.

3. After enabling all the widgets you need, SAVE TEMPLATE and go BACK.
4.  In the TEMPLATE page, click on the "gear" icon under the MOBILE preview shown.
We have two options at "On mobile devices, show a mobile version of your current template".
  1. Yes. Show mobile template on mobile devices. (choose this option)
  2. No. Show desktop template on mobile devices.
5. Click to choose  "Yes. Show mobile template on mobile devices."
6. Choose mobile template: Click and choose "CUSTOM".
Custom adapts your template customization to mobile. Be sure to preview your template.
7. Click SAVE.

After saving the changes, open the blog on mobile device and check. The widgets you enabled will now be displayed on the mobile device. This includes widgets such as popular posts, labels, others and even Google Adsense code added through HTML/JAVASCRIPT widgets.

As shown in the screenshots below, 

How to make Blogger widgets visible in Blogger Mobile template 2     How to make Blogger widgets visible in Blogger Mobile template 3

If you find the post helpful, please like, share and let me know in the comments. Cheers!


Comment with Facebook

Comments

  1. thank you i get it i find it for long time

    ReplyDelete
    Replies
    1. Welcome. I am glad you found it helpful. Goid day.

      Delete
  2. Mehn, it worked for me. I have been searching the web for like a week now and I got it here. Wow! I appreciate big. Thanks a lot.

    ReplyDelete
    Replies
    1. You are Welcome. I am glad you found it helpful. Good day.

      Delete
  3. hello,i have done find a widgets on html on my blog and have done to add mobile ='yes' but why still not work on mobile view my site like www.caramenjahit.com?m=1 please help me whats wrong with my template blog.Thank you

    ReplyDelete
    Replies
    1. Find the widget you are interested to show on mobile and in it's code just add mobile = 'yes' like this:


      If you need more help, you may export your template, and save it on Google Drive or Dropbox, and share me the link. I will have a look. If so, do let me know the widget you are trying to show on mobile too.

      Thanks.

      Delete
  4. bro having the same issue too


    Added the code but every time I try to save it it keeps on saying template can not be saved bla bla bla

    kinda frustrated

    ReplyDelete
    Replies
    1. Can you copy and share the error here?
      I think while editing, you may have missed some tags. Check if the tags are properly closed. Also you should always backup your template first before editing. If so, restore it and try again.

      Delete
  5. Thanks so much for posting this. I'd been wondering for ages how to do this on my funny jokes and pictures website.

    ReplyDelete
    Replies
    1. Hi Robert,
      You are welcome and I am glad you found the post helpful/interesting.
      Regards,
      www.techubber.blogspot.com

      Delete
  6. Thank you so much .
    Love from www.goCareer.in

    ReplyDelete
    Replies
    1. Hi, I'm glad it helped.
      Regards,
      www.techubber.blogspot.com

      Delete
  7. Nicely written brother. It helps me lot. Before i don't use any widget in my mobile view.

    ReplyDelete
    Replies
    1. Hi Rihan,
      Good job...I'm glad it helped.
      Regards,
      www.techubber.blogspot.com

      Delete
  8. Thanks.I am done.It helped me lot.Thanks ince more..

    ReplyDelete
    Replies
    1. Hi Abdul,
      You are welcome. I am glad the post was of some help :)

      Regards,
      www.techubber.blogspot.com

      Delete
  9. Can we add media.net or infolink ads on blogger templates please reply ?

    ReplyDelete
    Replies
    1. I haven't used media.net ads. Otherwise, yes, you can use Infolink ads with Google Adsense in your blogs. But do take care of Google Adsense display policies. Google it.

      Delete
  10. Hello! I have a problem i cant seem to find ANY solution! The gear icon beneath the mobile template preview disappears before i click on it!! I have tried three different devices and over three browsers all compatible with google's Blogger. I have been searching for a solution for over a week but i cant find one. Please help!

    ReplyDelete
  11. I have followed your tutorial and also many my widget are now showing on mobile, but only recent post widget showing only heading.

    ReplyDelete
    Replies
    1. Hi Narendra,
      I hope you are not the PM LoL :D
      Jokes apart, I am glad you were able to follow the post to enable most widgets. Regarding the "recent post", is that a custom code? As far as I remember, Blogger does not have a recent post widget by default. But still, if the code is added to a Blogger Gadget, the behaviour should be the same as other widgets.

      What is the link to your blog/website?

      Delete
  12. I have also same problem. In my mobile template shows only home button in widges. How to show all pages in widget?

    ReplyDelete
  13. Very Helpful buddy, i really appreciate, now i can show any widgets i want on mobile for my blog https://bhejafrynews.blogspot.com

    ReplyDelete
  14. thanks brother. You are very smart . Thanks for help me.

    ReplyDelete
    Replies
    1. Thanks for the feedback. I am glad it helped.

      Delete
  15. Each time I try to save the widget it tells me "be.widget" must be followed with > or/> and yet I can't change anything what should I do I need your reply now please

    ReplyDelete
    Replies
    1. As described in the post, all you need to do is add mobile='yes' to an existing widget starting code.....such as in:


      There is no 'be.widget' here. So the problem you described may be from somewhere else in the code or some other widget...

      If you have a backup restore it and try again.

      Delete
    2. As described in the post, all you need to do is add mobile='yes' to an existing widget starting code.....such as in:


      There is no 'be.widget' here. So the problem you described may be from somewhere else in the code or some other widget... If you have a backup of the template, may be restore it and try again?

      Delete

Post a Comment