To customize your mobile template and to show/Hide widget in Mobile Device, You need to first Activate Your Mobile Template then Change it to custom View.
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"'>
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 HTML homepage:
Eg. <b:widget id='Attribution1' locked='true' mobile='only' title='' type='Attribution'/>
For displaying widget both in desktop and in mobile, in the
<b:widget> tag, Just add this attribute: mobile='yes'
Eg. <b:widget id='Attribution1' locked='true' mobile='Yes' title='' type='Attribution'/>
And Similarly NO For hiding widget in Mobile view.
I hope You are satisfied from article How To Customize/Design Mobile View For Blogger
Please Leave Your Comment...
To activate Follow easy steps as mentioned below:
- Go to blogger»» Template
- In template tab, there are a mobile preview, then click the button below that preview.
- Then check the Yes. Show mobile template on mobile devices and select the mobile template to custom (If you desire to design your own mobile template)
- Then save.
- Now Go to Template Tab.
- Click On Edit Template.
- Now search (CTRL+F) this code: <body>
- Replace that code with this
<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
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 or Hide widget in Mobile View
For displaying Widget ONLY in mobile,Find Your Desired Widget and Make Following Changes. Find Respective <b:widget> tag, just add this attribute: mobile='only'Eg. <b:widget id='Attribution1' locked='true' mobile='only' title='' type='Attribution'/>
For displaying widget both in desktop and in mobile, in the
<b:widget> tag, Just add this attribute: mobile='yes'
Eg. <b:widget id='Attribution1' locked='true' mobile='Yes' title='' type='Attribution'/>
And Similarly NO For hiding widget in Mobile view.
I hope You are satisfied from article How To Customize/Design Mobile View For Blogger
Please Leave Your Comment...
Thanxxxxx... Mysh Khan
ReplyDeleteGood job!
ReplyDeleteThese tips help for all beginner and experience developer to customize mobile template in blogger.
This comment has been removed by the author.
ReplyDeleteThanks ..
ReplyDeletehttp://www.techsum4u.in
ReplyDeletemobile priceupdate information our in country
Thanks for this tutorial on how to edit blogger mobile template.
ReplyDeleteGreat post.
ReplyDeleteAwesome post. Thanks for sharing a nice post with us
ReplyDeleteThanks for telling us how to edit blogger mobile template. I always used had a problem in mobile templates. Anyways, I had face some problems regarding this which I have mentioned on this site. Please tell me how to fix it...?
ReplyDeletehttps://mdasdrne7.wixsite.com/mysite