Announcement:

  Hello, We Changed Our Cloth, How It Is Looking? Leave Your Feedback At Our Page.

Wednesday, May 1, 2013

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

This Article Was Live On: Wednesday, May 1, 2013 And Till Now Have12 comments.
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 Article Using...




Don't Forget To Read This Also...



12 comments :

  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.

    ReplyDelete
    Replies
    1. You Are Welcome To Be Here With Us, Be With Us To Get More Tips Like This...

      Delete
  2. Replies
    1. You Are Welcome Here And Thanks For Liking Our Stuff...

      Delete
  3. 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

    ReplyDelete
    Replies
    1. Welcome Here And Thanks For Liking It, Be With Us To Get More...

      Delete
  4. It don't work with default mobile version

    ReplyDelete
    Replies
    1. Its Working Everywhere. What Your Error...???

      Delete
  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).

    ReplyDelete
    Replies
    1. For This, First You Have To Active Your Mobile Template From Template DashBoard To Allow These Codes To Work Or Use Conditional Tags To Avoid This.

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

    ReplyDelete
    Replies
    1. 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.

      Delete

Speak Your Mind:



Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.