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, Emeka Kamanda from Tripozia 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:
To show or hide these widgets, you must first change your mobile view to Custom.
- From your dashboard > Design > Template.
- Click on the sprocket symbol below your site’s Mobile preview.
- With your mobile template set to Yes, click on the Choose mobile template dropdown menu and select Custom.
- Hit the Save button.
- While still on Template, click on Edit HTML then Proceed.
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.
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!
Related Tricks & Tutorials
Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here