News!! Adding Gadgets To Your Mobile-Template Makes Your Weblog Amend For Smartphone Visitors

This article shows how to add together gadgets to the mobile version of your blogger template.

Gadgets in addition to mobile templates

Previously I've described how to add together a gadget to your blog.

If yous receive got not enabled a mobile template for your blog, in addition to hence visitors who await at it using a mobile device (smartphone, tablet etc) volition encounter all your content in addition to gadgets.   But they volition likely have to scroll left in addition to correct a lot, because your weblog volition last a lot wider than their screen.  There mightiness last some issues if yous receive got gadgets that require javascript or detail media players, which their device doesn't receive got installed. But these are precisely the same every bit the issues for your visitors who are using desktop computers.

But if yous have enabled a mobile template, in addition to hence readers who are using a mobile device encounter a different design which is tailored to their screen-width, though notwithstanding using the colour/theme that yous chose.

Blogger faced some challenged when they built these mobile templates: many bloggers lay a lot of seek into pattern in addition to providing gadgets that.    But a 300-ish pixel hide just does non receive got room for a sidebar in addition to weblog content, in addition to may non receive got infinite for some of the things that gadgets do, either.

What Blogger receive got done is to say that only some gadgets are normally shown on mobile-template versions of your blog:

• Header
• Blog Posts
• Profile
• Pages
• AdSense
• Attribution

However it's slow to add together other gadgets to your ain customized mobile template, in addition to to develop gadgets that are alone seen yesteryear readers using mobile-devices - provided yous are willing to receive got the risks of editing your template.

(I've described how to take away the attribution gadget from mobile-templates before, because it's ane that some people especially loathe - in addition to of course of report the same approach tin last used for the other criterion gadgets too.)

How to add together a gadget to the mobile template

First, banking concern gibe that mobile has been enabled for your blog, in addition to that your mobile template is develop to exhibit customizations:   larn to the Template tab, click on the gear-wheel nether mobile, tick Yes (for exhibit mobile template), in addition to hence select Custom, in addition to press the Save button.

Add the gadget to your blog, inward the commons way:  when yous are choosing the parameters, brand certain yous intend nigh the sum of screen-space that your mobile-readers volition receive got to encounter it.

Find the gadget ID.

Edit your template: yous don't postulate to expand the widgets.

Locate the gadget code, yesteryear searching for the ID yous flora (tip: utilisation your brower's search function, eg ctrl/F). It volition await something similar this (slightly different, of course, if the gadget yous are working on is of a unlike type):

<b:widget id='PlusBadge1' locked='false' title='Google+ Badge' type='PlusBadge'/>

To show the gadget on the mobile version of your blog, add together mobile='yes' to the code, similar this:

<b:widget id='PlusBadge1' locked='false' mobile='yes' title='Google+ Badge' type='PlusBadge'/>

To exhibit the gadget only on the mobile template in addition to non to desktop users, add together mobile='only' to the code, similar this:

<b:widget id='PlusBadge1' locked='false' mobile='only' title='Google+ Badge' type='PlusBadge'/>

Save the changes.

Use either a mobile device (ideally), or some other tool that lets yous examine blogs every bit they would look on unlike hide sizes, to check that the gadgets are showing every bit yous intend they should.

Update:   

Since showtime writing this post, I receive got flora out that due to a põrnikas inward Blogger, if yous receive got a gadget alongside mobile='only' set, in addition to hence when yous seek to brand changes to the weblog using the Dashboard > Layout editor:

• They volition non save, and 

• If yous seek to preview, yous larn an mistake message:

The template is updated inward other place. Please reload the master copy page in addition to retry it again.
Error 500

The alone agency I receive got flora to larn roughly the mistake is to take away the mobile='only' statement.

If yous actually desire to receive got mobile-only gadgets, in addition to hence yous may postulate to:

1. Remove the mobile='only' statement
2. Make the Layout editor changes
3. Replace the mobile='only' statement.

What gadgets should yous add together to your mobile template?

There are no hard-and-fast rules here:   it's all nigh what yous desire your mobile visitors to last able to access.   I receive got seen people add together blog-rolls, linked-lists, polls, profiles, in addition to diverse other elementary widgets.

Gadgets that I intend could last to a greater extent than troublesome are slideshows, pop posts (if yous seek to exhibit a thumbnail), newsreel, subscriptions, gadgets from Amazon.com in addition to other tertiary parties.

You just postulate to recall sum of hide infinite which your visitors have, in addition to how large the images are probable to last for them.   And also that gadgets are probable to last shown every bit the bottom of the list-of-posts (which is how the blog-posts gadget shows the home page of your mobile blog), hence won't last nearly hence obvious every bit they are inward the sidebar.

Why lay gadgets alone inward the mobile blog?

You may wonder why a gadget should alone larn on the mobile version.

One argue is to furnish a simpler alternative to a full-featured gadget that is shown on the non-mobile version of the blog. For example, I utilisation a two-page google-custom-search option here on Blogger-Hints-and-tips. This lets me command what sites are searched, in addition to utilisation some advanced display features. But a mobile-sized hide won't produce out alongside this. So if I wanted to brand Blogger-HAT to a greater extent than mobile-friendly, I'd add together a regular search-gadget, but alone exhibit it to on mobile-devices hence that non-mobile visitors didn't larn confused.

Positioning gadgets on the mobile template

gadgets that are lay to a higher identify your header: examine your weblog extra carefully if you've tweaked your template inward this agency earlier adding mobile-specific tweaks.

Troubleshooting

Stopping gadgets from showing on mobile-template blogs (ie adding mobile='no') does non require yous to select the Custom pick from the listing of mobile template.   But adding them (except for the ones inward the default list) does.

The default mobile gadgets are  only shown if yous receive got lay them onto your weblog template: if they are non inward your weblog at the moment, in addition to hence they volition non automatically last shown just because yous enable a mobile template.

What other problems receive got yous had alongside mobile-templates?

---

Related Articles

Putting a gadget into your blog

Turning your blog's mobile template on

Advantages in addition to disadvantages of editing your blogger template

Finding the id for whatever gadget

Adding a google-custom-search

Giving your weblog a home-page

Tweet

Subscribe to receive free email updates: