Blogger Ever

Blogger's Mobile template feature you may never knew existed

These native Blogger features for mobile you may get surprised to know exists.
Blogger hosting blogs can be ultra fast on mobile devices unless we know that Blogger have strong native API that detects mobile devices and works accordingly. I cannot imagine how many users have seen "?m=1" or "?m=0" while surfing their blogs in mobile. 1 and 0 are representation weather site is on mobile template or not. Lets dig into it to get more familiar with what you may know.

Introduction & Setup

Web is filled with CSS3 responsive solutions, but making the site responsive is not only focused on re-sizing the stuff to fit in the screen but instead this topic is much more heated. A mobile site should be focused on several mind sets.
  • Mobile data are slower than those of PC have.
  • Mobile screen is smaller than PC.
  • Images must not only smaller in dimension but in size too.
  • Not all widgets and codes are necessary in mobile.
  • Ads should be use effectively in order to get maximum revenue.
To setup the mobile template for mobile devices, go to Blogger > Template and click on gear button under Mobile.
Then select Yes...
Click Save and in this way your Blogger mobile template is activated.

Mobile condition using b:if tag

Using mobile condition tag, you can target scripts to be loaded in mobile template. Mobile template is only activated when site detects the mobile devices and shocking point is that no script is necessary for that, Blogger itself detects and redirect the page with parameter as m=1. Now to mobile condition add the following code for it.
<b:if cond='data:blog.isMobile'>
<!-- Mobile Targeted Content Here-->
This condition is applicable only within template code it means you cannot use them in HTML/Javascript widget located in Layout setting. Further practical examples are putting Javascript and CSS for mobile only to reduce the script and style load. Let say you have to put script tag when its not mobile tag then you need to use '!' (exclamation mark) operator to oppose the condition.
<b:if cond='!data:blog.isMobile'>
<!-- Not Mobile Targeted Content Here-->
Putting something under the above condition will not be loaded in or display in mobile. If you want to load some sort of framework or polyfills for better mobile support.

Mobile Class

If you replace body opening tag with the following markup, you would be able to get a .mobile class in body whenever the mobile site is active.
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
This addition of class will let you customize couple of things quite easily. Hiding of ads, big buttons, and wrapping the stuff to fit in mobile theme.
.mobile .outer-wrapper{
Make sure to put mobile code after the main code, because this is how overriding of cascade rule works.

Widget Mobile Support

Widgets can be set with mobile attribute to show them on mobile template. You can control mobile view with mobile attribute on b:widget tag.
<b:widget class='footer-area' id='footer-area' mobile='yes'></b:widget> 
Mobile template shows 6 widget by default.
  • Header
  • Blog
  • Profile
  • PageList
  • AdSense
  • Attribution
Now mobile attribute has 4 values.
  • default (above listed 6 widgets have yes others have no)
  • yes (Every kind of devices shows up)
  • no (Non mobile devices only)
  • only (mobile only)
Have something to add? Leave a comment or contact me.

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.