Thursday, May 24, 2012

Show Disqus comments and other widgets in Blogger mobile template

Posted On 0 comments Follow us on twitter
blogger mobile template

Handheld devices users are increasing day by day. If you see around, you will found out that everyone from cobbler to millionaire has mobile phone, although some has smartphones and some has featured phones. People use internet on mobile more than computer. Every webmaster and blogger should optimize their site for mobile users to increase income, reputation, readership, profit and more. You can use mobile themes, plugins, etc. to optimize your site; these plugins are available for major forums scripts including Vbulletin, PhpBB and etc. as well as for many CMS (Content management system) includes WordPress (self-hosted), Joomla and etc. Our topic is about Blogger blogs, Blogger is also a CMS hosted by Google, in Blogger you shouldn’t need to install any theme or plugin to optimize it for mobile. Blogger contains built-in mobile themes.

Blogger mobile templates:

These templates are handheld devices friendly templates, introduced in June 2011, after that Blogger announced that now users can customize mobile templates as well as use your current template as a mobile template.

If you want to use these templates follow below steps:

1. Go to Blogger dashboard
2. Select template from more options menu
3. Select setting icon from mobile section
4. After that tick Yes. Show mobile template on mobile devices.
5. Select any mobile template you may like as well as use your current template as a mobile template by selecting custom.
6. Done

selecting mobile templates

selecting mobile templates

Or you can also access mobile template by using ?m=1 tag in any blogger powered blog url:
For example is desktop version of your blog and is the mobile version of your blog.

How to show widgets on Blogger mobile templates:

By default widgets are disappeared in mobile templates but you can easily show them.
I think there are only two ways to show widgets in blogger mobile templates.
1. Using b:if mobile conditions tag:  use widgets in <b:if cond="data:blog.isMobile"> condition tag.
2. Or use mobile='yes' attribute in <b:widget >senction
Here I’m showing step by step how to display widgets in Blogger mobile templates:
Generally you have to add mobile='yes' attribute to <b:widget> element, you can identify by their title.

See also: Disqus 2012 beta

For example I have to show Disqus comments on Blogger mobile templates, as mentioned up we can identify widget by their title, many don’t use title in these types of widgets and you can also identify widgets by their ids. Disqus is always installed in inline template, follow these steps show Disqus comments in mobile template:

1. Go to Blogger dashboard
2. Go to template
3. Click edit Html
4. Check expand widget templates
5. Press Ctrl+F
6. Search for Disqus

As showing in below screenshot add mobile='yes' attribute in the Disqus’s root widget.

After that comments will be shown in mobile templates, as shown in below screenshot:

For other widgets, use same method search <b:widget> and add mobile='yes' attribution.


Post a Comment