How to Use Customized Mobile Template on Blogger

Most times its very frustrating to find out that people cannot subscribe for your feeds when they few via mobile and most of the contents you will want to display will not show on your default mobile template. So in this post I will be showing you how to use Customized mobile Template on Blogger blogs. Alot of Pro bloggers already know this so am this article is mainly for newbies who are finding it difficult.

Customization of your mobile Template helps adapt your desktop template to mobile version .

You may also like How to Convert your Facebook profile to Fan Page


How to Use Customized Mobile Template on Blogger

Log In to your Dashboard > Click the Dropdown Menu > Click on Template

Click on the gear/settings Icon below mobile Template

Click on the Dropdown menu just under "Choose mobile Template" and select Customize

Remember to Preview the mobile template before you click the Save button.

After saving, you find out that your sidebars will start appearing,as well as ads on mobile version.

But before doing this If you want to be able to control what appears on mobile, You need to play with your html codes a little.

To hide any Default widget in the mobile site,you will need to use the mobile="no" property

Example : The default widget tag/code for Attribution widget is :

<b:widget id='Attribution' locked='true' title=' ' type='Attribution'/>

Now to hide the Attribution widget on mobile site, just insert the "mobile="no" as shown below :

 <b:widget id='Attribution' locked='true' mobile='no' title=' ' type='Attribution'/>

If you want to show any non default widget, simple use mobile="yes" property

Example : The default widget tag/code for Blog Archive widget is :

<b:widget id='BlogArchive1'  title='BlogArchive ' type='BlogArchive'/>

Now to make the Blog archive widget show on mobile site, simply add the mobile="yes" property as shown below :

 <b:widget id='BlogArchive1'  title='BlogArchive ' mobile='yes' type='BlogArchive'/>

While If you want to show a widget only on the mobile site and not on the desktop site, simply use the mobile="only" property

Example : Using the Attribution widget, just add the mobile="only" as shown below :


<b:widget id='Attribution' locked='true' mobile='only' title=' ' type='Attribution'/>

and the widget will display only on mobile.

I hope this helps and If  you have any difficulty Please use the comment box.

 

- See more at: http://www.realcombiz.com/2013/01/how-to-edit-and-customize-blogger.html#sthash.P9ZmSxmP.dpuf

- See more at: http://www.realcombiz.com/2013/01/how-to-edit-and-customize-blogger.html#sthash.P9ZmSxmP.dpuf

Most times its very frustrating to find out that people cannot subscribe for your feeds when they few via mobile and most of the contents you will want to display will not show on your default mobile template. So in this post I will be showing you how to use Customized mobile Template on Blogger blogs. Alot of Pro bloggers already know this so am this article is mainly for newbies who are finding it difficult.

Customization of your mobile Template helps adapt your desktop template to mobile version .

You may also like How to Convert your Facebook profile to Fan Page


How to Use Customized Mobile Template on Blogger

Log In to your Dashboard > Click the Dropdown Menu > Click on Template

Click on the gear/settings Icon below mobile Template

Click on the Dropdown menu just under "Choose mobile Template" and select Customize

Remember to Preview the mobile template before you click the Save button.

After saving, you find out that your sidebars will start appearing,as well as ads on mobile version.

But before doing this If you want to be able to control what appears on mobile, You need to play with your html codes a little.

To hide any Default widget in the mobile site,you will need to use the mobile="no" property

Example : The default widget tag/code for Attribution widget is :

<b:widget id='Attribution' locked='true' title=' ' type='Attribution'/>

Now to hide the Attribution widget on mobile site, just insert the "mobile="no" as shown below :

 <b:widget id='Attribution' locked='true' mobile='no' title=' ' type='Attribution'/>

If you want to show any non default widget, simple use mobile="yes" property

Example : The default widget tag/code for Blog Archive widget is :

<b:widget id='BlogArchive1'  title='BlogArchive ' type='BlogArchive'/>

Now to make the Blog archive widget show on mobile site, simply add the mobile="yes" property as shown below :

 <b:widget id='BlogArchive1'  title='BlogArchive ' mobile='yes' type='BlogArchive'/>

While If you want to show a widget only on the mobile site and not on the desktop site, simply use the mobile="only" property

Example : Using the Attribution widget, just add the mobile="only" as shown below :


<b:widget id='Attribution' locked='true' mobile='only' title=' ' type='Attribution'/>

and the widget will display only on mobile.

I hope this helps and If  you have any difficulty Please use the comment box.

 

- See more at: http://www.realcombiz.com/2013/01/how-to-edit-and-customize-blogger.html#sthash.P9ZmSxmP.dpuf

- See more at: http://www.realcombiz.com/2013/01/how-to-edit-and-customize-blogger.html#sthash.P9ZmSxmP.dpuf