We Started A Facebook AutoLiker. Check Out Our EXELiker...

How To Add/Remove Gadget/Widget To Your Mobile Blogspot Template?

How To Add/Remove Gadget/Widget To Your Mobile Blogspot Template?

This article shows how to add gadgets to the mobile version of your blogger template. If you have not enabled a mobile template for your blog, then visitors who look at it using a mobile device (smartphone, tablet etc) will see all your content and gadgets. But they will probably have to scroll left and right a lot, because your blog will be a lot wider than their screen. There might be some issues if you have gadgets that require JavaScript or particular media players, which their device doesn't have installed. But these are exactly the same as the issues for your visitors who are using desktop computers.

But if you have enabled a mobile template, then readers who are using a mobile device see a different design which is tailored to their screen-width, though still using the color/theme that you chose. Blogger faced some challenged when they built these mobile templates: many bloggers put a lot of effort into design and providing gadgets that. But a 300 pixel screen simply does not have room for a sidebar and blog content, and may not have space for some of the things that gadgets do, either.

Default Mobile Gadgets:

What Blogger have done is to say that only some gadgets are normally shown on mobile-template versions of your blog:
1.) Header
2.) Blog Posts
3.) Profile
4.) Pages
5.) AdSense
6.) Attribution

However it's easy to add other gadgets to your own customized mobile template, and to set up gadgets that are only seen by readers using mobile-devices - provided you are willing to take the risks of editing your template.

How To Add A Extra Gadget To The Mobile Template?

1.) First Open Your Mobile Template And Choose Custom As Describe In A Post Of How To View Mobile Template On Handheld Devices?
2.) Add Your Desire Gadget That You Want To Vie That On Mobile Template.
3.) Get The Widget/Gadget ID From Blogger Layout Tab.
4.) Now Go To Blogger "Template" Tab And Click "Edit HTML".
5.) Don't Expand Widget HTML Codes.
6.) Press "CTRL+F" And Search Your Widget/Gadget ID.
7.) Find And Locate It That Will Appear Like Below.
<b:widget id='PlusBadge1' locked='false' title='YOUR-GADGET-TITLE' type='PlusBadge'/>
8.) To Show This Gadget On Your Mobile Template And Desktop Template, Just Add mobile='yes' To The Code Line Like Below.
<b:widget id='PlusBadge1' locked='false' mobile='yes' title='Google+ Badge' type='PlusBadge'/>
9.) To Show This Gadget Only On Your Mobile Template And Desktop Template, Just Add mobile='yes' To The Code Line Like Below.
<b:widget id='PlusBadge1' locked='false' mobile='only' title='Google+ Badge' type='PlusBadge'/>
10.) Save The Changes.

Note: If You Want To Hide And Gadget/Widget On Mobile Template From Default One (Header, Blog Posts, Profile, Pages, AdSense, Attribution ), Just Add mobile="no" As Describe In The Above Examples.

Some General FAQs?

Q1:) What Gadgets Should You Add To Your Mobile Template?

Ans:) There are no hard-and-fast rules here: it's all about what you want your mobile visitors to be able to access. I have seen people add blog-rolls, linked-lists, polls, profiles, and various other simple widgets.
Gadgets that I think could be more troublesome are slideshows, popular posts (if you try to show a thumbnail), newsreel, subscriptions, gadgets from Amazon.com and other 3rd parties.
You just need to remember amount of screen space which your visitors have, and how large the images are likely to be for them. And also that gadgets are likely to be shown as the bottom of the list-of-posts (which is how the blog-posts gadget shows the home page of your mobile blog), so won't be nearly so obvious as they are in the sidebar.

Q2:) Why Put Gadgets Only In The Mobile Template?

Ans:) You may wonder why a gadget should only go on the mobile version. One reason is to provide a simpler alternative to a full-featured gadget that is shown on the non-mobile version of the blog. For example, I have two menu bar in two HTML Gadget, one is for Desktop and other is for Mobile due to screens sizes.

Q3:) What Is The Best Position For Gadgets On The Mobile Template?

As far as I can see, we do not easily have any control over the positioning of gadgets in the mobile-template versions of our blogs but some experiments make me think that:
A:) Gadgets from the header in the regular layout are put above the list of posts in the mobile view.
B:) Gadgets from the footer in the regular layout are put below the list of posts in the mobile view.
C:) Gadgets from the sidebar in the regular layout are put below the list of posts in the mobile view.

Q4:) How To View Mobile Template On Desktop For DEMO?

Ans:) Just Add ?m=1 In Front Of Your Blog URL And Paste In Browser Address Bar To View The DEMO.

But there could be more going on here - please let me know if you've worked out any more rules that are applied. What other problems have you had with mobile-templates? Feel free to ask.

You Like It, Please Share This Recipe With Your Friends Using...

16 Responses to “How To Add/Remove Gadget/Widget To Your Mobile Blogspot Template?”

  1. Hi Admin,

    Your post really helped me to understand how to add/remove gadet to my mobile blogspot. It has great details and yet it is easy to understand.
    That’s what i was looking for. I will definitely share it with others.

    Thanks for sharing.

  2. Bro you rocked as always.

  3. john albert says:

    Thanks for the nice blog. It was very useful for me. Keep sharing such ideas in the future as well. This was actually what I was looking for, and I am glad to came here! Thanks for sharing the such information with us

    Search Engine Marketing

  4. Yên Bình Bùi says:

    It don’t work with default mobile version

  5. I’m using a custom responsive template on my site Best Pic Store. I want to hide a like us popup widget from my mobile template, so I added mobile=”no” like you described above. But it’s still appearing on my mobile template (Tried using Incognito window).

  6. हिंदी गाने says:

    That’s fine! but is there a way to move top adsense ads to below title of the post in mobile template ??

    • EXEIdeas says:

      You Have To Add Adsense Codes Manually Under Mobile Posts Titles As You Can See Our This Blog Mobile Template Too Where We Are Using Ads Under Post Title.

  7. Kanyi says:

    Hi EXEIdeas, nice website you got. I dont know why my profile widget (contributor widget cos i use my other emails also) stopped showing up on my blogger mobile view but it’s on my desktop view.

    I’ve tried adding mobile=’yes’ but it’s still not showing up.

    Please can you help me with tips on how to fix it…Thanks!

    • EXEIdeas says:

      You Widget Is Live On Mobile Version Too But You Are Not Able To See Because A CSS Is Hiding This. Find The Below CSS Code And Delete It…
      .mobile #Profile1 {
      display: none;
      }

  8. HI ADMIN PLS AM SEEING THIS WHEN TRYING TO ADD mobile=’yes’ TO MA WIDGETS PLS WHAT SHOULD I DOError parsing XML, line 1964, column 33: Element type “b:widget” must be followed by either attribute specifications, “>” or “/>”.

Leave a Reply