How To Show/Hide Gadgets In Blogger’s Mobile View

When it comes to customizing a blog’s design, Blogger users also tend to prefer having at least some control over how their site is going to look like when viewed from a mobile device and not just from a desktop or laptop screen.

In today’s featured tutorial, Top class Fun will show you how you can dictate to Blogger which widgets you want to  display whenever someone views your site from a mobile device. By default, Blogger has the following widgets for your mobile site:

1.      Header

2.      Blog

3.      Adsense

4.      PageList

5.      Profile

6.      Attribution

v  To show or hide these widgets, you must first change your mobile view to Custom.

v  From your dashboard > Design > Template.

v  Click on the sprocket symbol below your site’s Mobile preview.

v  With your mobile template set to Yes, click on the Choose mobile template dropdown menu and select Custom.

v  Hit the Save button.

v  While still on Template, click on Edit HTML then Proceed.

v  Now basically all you have to do at this point is search for widget’s tag (using Ctrl+F) and simply add the mobile= property inside it together with a yes or no attribute.

v  For example, your Profile widget’s tag would look something like this:

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>

To hide it in mobile view, simply add mobile=’no’

<b:widget id='Profile1' locked='false' mobile=’no’ title='About Me' type='Profile'/>     

Save your template and then try viewing your site on a mobile device to see how it looks like.
Emeka says that you can do this for any widget aside from the aforementioned defaults. Moreover, if you want a particular widget to appear ONLY on mobile view then you can use the attribute only (ex. mobile=’only’). Have fun trying this one on your blog!