How to add Blogger widgets only for mobile template?

A situation may arise when we want to add widgets in Blogger template that should appear only on mobile templates and not on web browser templates. In that case, follow the steps below.

Scenario: We shall take the following example to explain how to add Blogger widgets only for mobile template. I added an "AddThis" mobile sharing toolbar that should appear on top. When it appears, it blocks the title of the Blog. So I wanted to push down the header region a bit lower so that the "AddThis" widget does not block the blog title from view. So, I thought of adding a simple HTML widget and write "Loading...", and place it above the "header" widget. That will push the header a bit lower and every one can be accommodated happily.

Usually, we can't add a widget in the header section. But you can do the following edit to enable and add a widget in the header region. In this exercise, we shall -
1) Enable the "Add a gadget" in the header section (which is disabled by default)
2) Add a new HTML widget to push down the header (title of the blog) a bit.

1) Enable the "Add a gadget" in the header section 

• Go to Blogger > Template > Edit HTML
• In the template page, click "Jump to Widget", and select "Header1"
• This will take you to the header widget code which looks something like:

<b:widget id='Header1' locked='false' title='Title (Header)' type='Header' version='1' visible='true'>
 ...
 </b:widget>

• Scroll a little above this code, and you will see the header section, something like this:

 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

This is the header section area, and as we can see maxwidgets='1' showaddelement='no', that is why we can't add widgets/gadgets from layout.

• Remove the maxwidgets='1' showaddelement='no' from the section code, and it now looks like:
  

<b:section class='header' id='header' >

• Save the template.

2) Add a new HTML widget to push down the header 

• Go to Blogger > Layout
• Now we can add a widget/gadget in the header section.
• Click on "Add a gadget" and add "HTML/JAVASCRIPT" widget.
  (If you don't see the "Add a gadget" link, refresh the layout page from the browser refresh button).

Leave the Title blank and enter any data. Example: "Loading..."

• Save Layout. 
• View the blog in browser as well as mobile.

The new HTML/JavaScript widget is visible in Browser but not in mobile.

To enable the new widget added to be visible in mobile template, do the following-

• Go to Blogger > Template > Edit HTML
• In the template page, click "Jump to Widget", and select HTML widget before "Header1".
• The HTML widget code looks something like this:

 <b:widget id='HTML3' locked='false' title='' type='HTML' visible='true'>
....
</b:widget><b:section class='header' id='header' >

• The enable the widget to appear in mobile templates, add the following:

mobile='yes'  -appears in mobile as well as browser tempaltes
mobile='only' -appears in mobile only

If you want the widget to appear only in mobile templates, add "mobile='only'" (without ").

<b:widget id='HTML3' locked='false' mobile='only' title='' type='HTML' visible='true'>

 In the screenshot below, the HTML widget added with content "Loading..." appears above the header only in mobile template and not in browser templates.

NOTE:
A Blogger widget with "mobile='only'" will not be visible in Blogger Layout Page after saving. It will be visible in Blogger Template > EDIT HTML page.

To make any further changes to such widgets, remove the mobile='only' from
Blogger Template > EDIT HTML, save template and then edit in Blogger Layout Page. After that enable the "mobile='only'" in Blogger Tempalte > Edit HTML.