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

, , , ,

In Blogger, the view on desktop computers and mobile devices are shown differently. By default, the template on mobile devices are stripped down and responsive. Not all sections or widgets displayed on desktop computers are visible 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 manually to the blog using Blogger HTML/JavaScript widget won't display on mobile devices. In order to show widgets visible 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 to test. Let's say we want to display a custom labels block.
  • Login to Blogger and 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 HTML/JAVASCRIPT 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'> 

But entering the additional code, we are telling Blogger to display this widget on mobile devices also.
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.

Screenshot below:

blogger-widgets-not-visible-on-mobile


    

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

Comment with Facebook

71 comments:

  1. clasroom deskAugust 21, 2016 at 2:35 PM

    thank you i get it i find it for long time

    ReplyDelete
    Replies
    1. JKSeptember 12, 2016 at 11:27 AM

      Welcome. I am glad you found it helpful. Goid day.

      Delete
  2. PeterSeptember 11, 2016 at 7:29 AM

    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. JKSeptember 12, 2016 at 11:28 AM

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

      Delete
  3. ida chaloSeptember 18, 2016 at 6:15 AM

    i want to try it for commentluv.

    ReplyDelete
  4. Rizsky AnandaNovember 7, 2016 at 7:48 AM

    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. JKNovember 7, 2016 at 2:00 PM

      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
  5. UnknownNovember 8, 2016 at 12:47 AM

    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. JKNovember 8, 2016 at 8:48 PM

      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
  6. RobertDecember 6, 2016 at 6:35 PM

    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. JKJune 6, 2017 at 10:16 AM

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

      Delete
  7. UnknownJanuary 14, 2017 at 6:12 PM

    Thanks Bro Is working for my blog:
    Business Success Blog

    ReplyDelete
  8. GocareetJanuary 28, 2017 at 12:23 AM

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

    ReplyDelete
    Replies
    1. JKFebruary 12, 2017 at 9:56 PM

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

      Delete
  9. RihanFebruary 5, 2017 at 6:39 PM

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

    ReplyDelete
    Replies
    1. JKFebruary 12, 2017 at 9:55 PM

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

      Delete
  10. Abdul HakimFebruary 12, 2017 at 10:24 AM

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

    ReplyDelete
    Replies
    1. JKFebruary 12, 2017 at 10:14 PM

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

      Regards,
      www.techubber.blogspot.com

      Delete
  11. Chakly RaflesiaFebruary 27, 2017 at 1:28 AM

    Thank's bro...

    ReplyDelete
  12. TonyMarch 9, 2017 at 11:25 AM

    thanks

    ReplyDelete
  13. FforFreeMarch 30, 2017 at 9:02 PM

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

    ReplyDelete
    Replies
    1. JKJune 6, 2017 at 10:21 AM

      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
  14. UnknownApril 15, 2017 at 12:35 AM

    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
  15. NarendraMay 28, 2017 at 2:08 PM

    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. JKJune 6, 2017 at 10:23 AM

      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
  16. UnknownJune 2, 2017 at 2:00 AM

    Big help! OldmanOCR.com

    ReplyDelete
  17. Subudhi ANJuly 7, 2017 at 3:16 PM

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

    ReplyDelete
  18. Viral Mirch MasalaAugust 1, 2017 at 7:20 PM

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

    ReplyDelete
  19. Yadwinder SinghOctober 4, 2017 at 11:31 AM

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

    ReplyDelete
    Replies
    1. JKOctober 5, 2017 at 9:55 AM

      Thanks for the feedback. I am glad it helped.

      Delete
  20. Jon-Paul SmithOctober 27, 2017 at 1:50 AM

    Thanks! This worked perfectly.

    ReplyDelete
    Replies
    1. JKApril 24, 2018 at 9:21 PM

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

      Delete
  21. AdminNovember 11, 2017 at 1:56 AM

    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. Techubber.Blogspot.comNovember 12, 2017 at 12:27 AM

      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. Techubber.Blogspot.comNovember 12, 2017 at 12:32 AM

      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
    3. My First BloggerMarch 17, 2019 at 9:59 AM

      I have this error when I try to save: Error parsing XML, line 2467, column 45: Element type "b:widget" must be followed by either attribute specifications, ">" or "/>".

      Delete
  22. UnknownJanuary 2, 2018 at 3:04 PM

    Thanks Bro Is working for my blog:
    filehippo

    ReplyDelete
  23. UnknownJanuary 2, 2018 at 3:05 PM


    Thanks! This worked perfectly.
    filehippo

    ReplyDelete
  24. UnknownJanuary 18, 2018 at 12:05 AM

    Thanks! I have'd set in my blog it is very helpful for me.

    ReplyDelete
    Replies
    1. TechubberMarch 13, 2018 at 12:00 AM

      Welcome. I am glad the post was helpful to you.

      Delete
  25. Aadil LatiefJanuary 23, 2018 at 6:07 PM

    Its one of the most relevant article that i have come across lately

    ReplyDelete
  26. Moheb RofailFebruary 3, 2018 at 3:20 PM

    Thanks a lot, it was very handy to me..

    ReplyDelete
  27. Veronica @ The Burgeoning BookshelfApril 20, 2018 at 3:15 PM

    Thank you this was perfect. I was wondering why no-one was subscribing to my blog and noticed recently the follow by email didn’t show on mobile view, 90% of my views are mobile. Now it shows! Yay!

    ReplyDelete
    Replies
    1. JKApril 24, 2018 at 9:22 PM

      Hi Veronica, I'm glad it helped.
      Regards,
      www.techubber.blogspot.com

      Delete
    2. Greg E NewtonApril 26, 2018 at 9:21 PM

      Can someone help me please? not working for me.

      Delete
    3. JKApril 26, 2018 at 11:02 PM

      As described in the post, you just need to go to edit html, find the respective code for the widget and add mobile='yes' to it.

      Delete
    4. Greg E NewtonApril 26, 2018 at 11:30 PM

      Still not working

      Delete
    5. JKApril 27, 2018 at 8:26 AM

      I hope you are using Blogger theme?
      If you can, export, download you theme, and send me the xml file. Mention which widget you are trying to enable on mobile. will check. I have emailed you

      Delete
  28. ruhiApril 26, 2018 at 3:06 PM

    Thanks For Sharing this information.

    ReplyDelete
    Replies
    1. JKApril 27, 2018 at 8:28 AM

      You are welcome.

      Regards,
      Admin
      www.techubber.blogspot.com

      Delete
  29. SafariApril 30, 2018 at 5:59 PM

    worked like a charm...
    @eworkwanted.com

    ReplyDelete
  30. Sumit KumarMay 6, 2018 at 6:02 PM

    Thank you so much sir. After 3 hour continuous search, I reached your blog and I got peace of mind. Thank you so much once again.

    ReplyDelete
  31. aaphtographersMay 18, 2018 at 10:18 PM

    as i have to change the header styling for the mobile ,and i have go to the theme and the mobile setting option but it is not showing the setting option in the page only customize and edit html is showing for the desktop version how i can get the setting option if it is not showing in it..... can u help me in this as i have to change the header format in the mobile browser ... it is showing me default one only

    ReplyDelete
  32. Dishan De SilvaMay 23, 2018 at 11:43 AM

    In my blog it's not working :(

    ReplyDelete
  33. ShariqqSeptember 7, 2018 at 11:54 AM

    Thank your bro, you saved my day, amazing help!

    ReplyDelete
  34. Ananya PathakSeptember 14, 2018 at 11:01 PM

    showing this msg when trying to save
    Error parsing XML, line 2261, column 39: Element type "b:widget" must be followed by either attribute specifications, ">" or "/>".

    ReplyDelete
    Replies
    1. JKApril 4, 2019 at 11:35 PM

      Hi
      Sorry for the late reply. You may have already resolved the issue.
      Probably the widget tag is not properly closed or ended.
      Refer this: https://bloggerbook.blakbin.com/2018/11/blogger-bwidget-tag.html
      It is explained well here.

      Delete
    2. AnonymousMay 12, 2020 at 3:38 PM

      I hve the same problem too, how to solve it? I already refer to the the link you gave above, but still I cannot solve it.

      Delete
  35. UnknownOctober 5, 2018 at 7:47 PM

    How about hashatory?

    ReplyDelete
  36. Adrie PetersonOctober 16, 2018 at 1:06 AM

    Thank you SO much for your tutorial, I greatly appreciate your advice—it worked like a charm on my blog! ( https://www.enthusiasticfantastic.com/ )

    ReplyDelete
  37. Wania SheikhDecember 19, 2018 at 11:35 AM

    Working 100% perfect, Thanks
    Regards
    Faster

    ReplyDelete
  38. maliknadeemMarch 29, 2019 at 12:37 PM

    Thank you SO much for your tutorial, I greatly appreciate your advice.....it works like charms on my blogs
    more information these links
    Pandora Apk

    ReplyDelete
  39. Osama HamdiOctober 6, 2019 at 6:55 PM

    May you help me, please? I'd like to make the author profile box of my blog appear on the mobile version as a user of blogspot? It only appears on the desktop version right now.

    ReplyDelete
  40. Omprakash SonwaniMay 30, 2020 at 11:16 AM

    Nice

    ReplyDelete
  41. Blog CityJuly 17, 2021 at 11:44 PM

    Thank you very much

    ReplyDelete
  42. Anand KumarAugust 1, 2021 at 8:44 AM

    thank you very much your post help me lot to display other external gadget in mobile view otherwise they don't show in mobile ....

    ReplyDelete
  43. Naj AkterApril 11, 2023 at 12:22 PM

    nice

    ReplyDelete

Subscribe to: Post Comments ( Atom )