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.