Complete guide to create Blogger template for mobile

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:

Read More:Complete guide to make a Blogger template designer for client by defining variables

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

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

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.

Read More:More Responsive Design Articles

Pros

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

Cons

• Includes extra scripts
• [Sometimes] increases page loading time.

Refer these posts

1. How to turn Blogger pages widget menu into a drop-down menu in small screens using jQuery plugin?
2. How to make a sliding panel in responsive design using Jquery mobile and Jquery plugin?
3. Add CSS into your style sheets for different screen sizes

Mobile custom 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.