How to activate your own mobile template
For activating is easy, just follow this tutorial- Open and login to blogger.com, select your blog then click the Template tab.
- In template tab, there are a mobile preview, then click the button below that preview.
- Then check the and select the mobile template to custom (if you want to design your own mobile template)
- And then save, then backup your template, then edit HTML then proceed.
- Now search (CTRL+F) this code: <body>
- Replace that code with this code: <body expr:class='"loading" + data:blog.mobileClass'>
- Then save template
- For temporarily your mobile template is activated, but maybe it's still disordered and not customized
Explaination
For call the mobile selector in blogger you need to make a like this:
.mobile .class {property: value;}
or .mobile #id {property: value;}
for mobile conditional tag is like this: <b:if cond='data:blog.pageType == "data:blog.isMobile"'>
How to make your layout is responsive
For design you need to know CSS of course, and you need to know your template structure.
For responsive style, i'll tell you some basic for responsive design.
If you want to make your wrapper is responsive, the first important thing is the #outer-wrapper. Then for make #outer-wrapper is responsive, you can use like this:
.mobile #outer-wrapper {max-width: 630px; width: auto;}
or .mobile #outer-wrapper, .mobile #main-wrapper, .mobile #sidebar-wrapper {float: none; width: auto;}
How to edit mobile HTML post layout
The mobile HTML post layout is in post widget, if you want to edit the layout, just edit like this:Mobile HTML homepage:
<b:includable id='mobile-index-post' var='post'>
Mobile HTML item page (post):
<b:includable id='mobile-post' var='post'>
How to display widget in mobile
For displaying ONLY in mobile, in the<b:widget> tag, just add this attribute:
mobile='only'
For displaying widget in desktop and in mobile, in the
<b:widget> tag, just add this attribute:
mobile='yes'
Ok that is the basic, maybe i'll update the advanced tutorial.... special thanks to Mas Sugeng for idea and inspiration, without him, i'll never know about mobile template in blogger
Tiada ulasan:
Catat Ulasan