Own A Blog Like This
For Questions, Inquiries, Click Here
Page | Group - Follow us - Call us - Hire Us - info@howtosguide.com
Join Howtosguide - Telegram Group Today!

Tuesday, 13 September 2016

Guides On How To Edit And Customize Blogger Mobile Templates





If you enable mobile template for your blog, here is a good news, you can now customize your mobile site to your own personal taste using CSS definitions. You will able to decide which widget is to be displayed in mobile site and which one shouldn't. You can also configure a widget to appear on both desktop and mobile site.


How To Customize Mobile Template


The default widget that appears on mobile template are as follow:

  • Header
  • Blog
  • Page List
  • Adsense (If applied)
  • Profile
  • Attribution
Three properties can be use to control how widget operates, and the properties include: mobile="no", mobile="yes", and mobile="only".

  • If you want to hide any default widget, simply use the mobile="no" property to hide the widget in mobile website.
Example: The default widget tag/code for attribution widget is:



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


Now to hide the attribution widget, simply insert the mobile="no" property as shown below



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


  • If you want to show any non-default widget, simply use the mobile="yes" property.
 Example: The default widget code for the archive widget is:



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


Now use the mobile="yes" property as shown below



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


  • If you want to show a widget only in mobile site, simply use the mobile="only" property.
Example: Let's try to show the archive widget only in mobile site, using the mobile mobile="only" property as shown below.



<b:widget id='BlogArchive1' title='Blog Archive' mobile='only' type='BlogArchive'>




What Next?


You will need to activate custom template for your mobile template, as it may not show any changes if you are the using any of the default template.

Now go to Template, click on the gear icon below the mobile template and set it as shown in the screenshot below.





It is advisable that you Preview the custom template before you finally click on the Save button.





Customize Mobile Template Using CSS


You can set CSS properties for both mobile and desktop view, but make sure your template is having the following code.



<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>



If you are so good at CSS, you can style your mobile site to your own perfect taste. You can edit some CSS class like:



.mobile .date-header {

  text-decoration:underline;

}




.mobile .main-header {

  margin: 0;

}




.mobile .content-outer{

text-decoration:none;

}


You can control how a widget behave in mobile site by using css class .mobile

Let us know if you have customize your mobile template and we will be happy to make a visit. You can check this blog on mobile and any recommendations or suggestions concerning the improvement of the mobile template is highly welcome.




No comments:

Post a Comment

Designed by Chivalry Benson