Blogger Ever

Complete guide to create Blogger template for mobile

This article is all about to make a Blogger template for mobile users. Normally, the user has 3 choices to make: simple mobile template, desktop template and the custom mobile template. Lets discuss them.
All about Blogger mobile template

Blogger being the world's biggest blog publisher has provided the solution of each and every problem. Perhaps, you need to find them out. Recently, a detailed study of Blogger mobile template showed some major features that can help you to create a better mobile template. Have a look at what we have here:

Your choices makes difference

Blogger have 3 choices for users. Each of them have pros and cons and I'm going to discuss in-detail study of each of them. We shall start with;

Ready Made Mobile Templates

Simple Mobile Template

Blogger users have a choice to select a mobile template which is specially designed to overcome the the problems of bloggers for Blogger users. Each of them is designed by Blogger have everything, a mobile reader wants.

The template shows a few widgets and have a very limited stuff in template. As you cannot much customize the template means, this option is for those who do not know how to code and do not have resources.

Pros

  • Ready made, never requires any customization.
  • Specially designed after the needs of mobile readers.
  • Light weight, loads faster.

Cons

  • Nothing for advance users.
  • Do not show some major elements as their is not sidebar in mobile template.
  • You have to use Blogger Pages Widget in order display in template, means no multiple drop-down.

Show Desktop Template

Desktop Template in settings

This option is popular among us because using this option have some advance uses, because adding some media queries you can get the result of your choice. However, you still not get all from your Blogger template because there are some elements that should not present in a mobile template but still you have to hide them using CSS due to which extra load on template.

However, this option is still popular due to DIY design options.

Pros

  • Can be used on advance levels as you can add stuff of your choice.
  • Better level customization.

Cons

Mobile custom Template

Custom mobile template

Custom mobile template I think is the best choice to make. The reason is that you can add conditions that works only when a person open the page in a mobile. This setting somehow combines the mobile template and desktop template features.

If you will choose this option then you can add the following condition that will work only when a person is from mobile.
<b:if cond="data:blog.isMobile">
</b:if>
Let say their is a banner which I want to show to only mobile users then I will add it like this:
<b:if cond="data:blog.isMobile">
<div class='banner'>
<!--Rest Of Your Code-->
</div>
</b:if>
Following are the widgets that will show-up on default, others will not display until you the attribute for mobile is added.

  • Header
  • Blog
  • Profile
  • PageList
  • AdSense
  • Attribution 
To add mobile attribute add the following attribute in widget tag like this:
<b:widget id='BlogArchive1' title='Blog Archive' mobile='yes' type='BlogArchive'>
Following are the values of mobile attribute:
  • yes
  • no
  • only 
Something want to add-up? Add in comments.
Blogger

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.