How to make Blogger widgets to appear in mobile view


Blogger widgets can be controlled to be available in mobile view (<blogger site url>?m=1) by using attribute "mobile" in "<b:widget>" tag. The value of the attribute can be:

  • default
  • yes
  • no
  • only

Widgets that are displayed on mobile by default are the following:
  • Header
  • Blog
  • Profile
  • PageList
  • AdSense
  • Attribution
Examples:

The following widget will not be available in mobile view, because it’s a BlogArchive widget.
<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>

To make it available in mobile view, add mobile=’yes’ attribute to it.
<b:widget id='BlogArchive1' mobile='yes' title='Blog Archive' type='BlogArchive'>

Setting mobile to 'no' makes a widget not display in mobile view, even if available in mobile view by default.
<b:widget id='Attribution1' mobile='no' title='Attribution' type='Attribution'>

You can also make a widget available only in mobile view by setting it to 'only'. The widget will not appear in the layout setting. So before setting the widget to "only", set it to "yes" first and experiment with the positioning on mobile view using the layout settings. Once satisfied, set the widget to "only" and the widget is exclusive for mobile view.
<b:widget id='BlogArchive1' mobile='only' title='Blog Archive' type='BlogArchive'>

[18 Sept 2012]
Use mobile='only' with care. Please refer to:
https://productforums.google.com/forum/?fromgroups=#!topic/blogger/1f_3elWgba0

References or Credits:
http://code.blogger.com/2011/11/introducing-custom-mobile-templates.html

Comments

  1. Looked for an easy way to do this, and found it! Thank you so much!! All other sites I found were too confusing. You made it so simple to do and I love what I have created!
    website design

    ReplyDelete
  2. You can use desktop chrome and inspect element to find out where does it comes from in the code.

    ReplyDelete
  3. Thanks! It worked indeed.. Fix your re-captcha btw..... it doesn't tell you what you need to select.

    ReplyDelete
  4. it doesn't work for me. please check it out thanks.

    ReplyDelete
  5. it doesnt work for me.help pls

    ReplyDelete

Post a Comment

Popular posts from this blog

City Code Table for Casio SGW300HD-1AV Watch

How to force only 4G or LTE network connection for Samsung Galaxy Note 4

Mounting NFS share directory from D-link DNS 320L on Ubuntu 12.04 LTS