Blogger's Custom Mobile Templates

I'm sure you knew already that now you are able to modify the feel and look of your blog's mobile view. To do so, first you'll have to activate the mobile view and choose the "custom" from the option given in dropdown list on the "Email & Mobile" tab setting. Here exactly: Visit the "Template" tab of your dashboard and click on the gear icon beneath the mobile template preview, and then select "Custom" from the "Choose mobile template" pulldown and save. -Hereby, your template may won't look exactly the same on a mobile browser, so you'll have to modify your template to make it appears as the way you want.



There are several rules that you'll to adhere to to customize your mobile view, here they are.

1. To control which of widgets on your blog's desktop view to appear or otherwise hide up on your blog's mobile view, you can add the following attribute onto the < b:widget> tag whose widget you want to appear or hide up on your mobile view: mobile='yes' or mobile='no' or mobile='only'.

*mobile='yes', it will set a widget to appear either on the desktop and mobile view.

*mobile='no', it will set a widget to hide up on the mobile view but appears on the desktop view.

*mobile='only', it will set a widget to appear only on the mobile view.

Here is an example.

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

By default, the widgets that display on your mobile view just after you activate and set its mobile view to "Custom", are the below:

*Header
*Profile
*PageList
*AdSense
*Attribution

2. To set a content, even if it's not a widget, to display on your mobile view, you can use the boolean variable make a command, pay attention on the below.

This will display a link titled John Smith's Blog on your mobile view.

< b:if cond="data:blog.isMobile"> < a href="http://j-smith-site.blogspot.com">John Smith's Blog< /a> < /b:if>

3. To set a different feel and look or layout for your mobile view you can make use of the / * For desktop view * / and / * For mobile view * / "message" (What is it called?) on your CSS code. But firstly, you'll have to replace the tag < body> on your template code with the below.

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

For example, the below will set your desktop header to 1000 px wide and mobile header to 400 px wide.

/ * For desktop view * /
# header {
width:1000px;
background:#333333;
}
/ * For mobile view * /
. mo b i l e #header {
width:400px;
background:#333333;
}

Here, if you guys have the following code in your template: body{background: "more code"}, then you can set it to body.mobile{background: "more code"} to modify it.

Example.

/ * For desktop view * / body { background:#333333; width:1000px; "more code" } / * For mobile view * / body.mobile { background:#333333; width:400px; "more code" }

And guys, if you implement this custom mobile template, then you can remove its mobile codes included in your template if you would, there is no need to keep them anylonger. By removing them you'll decrease your template size approximately 8kb smaller. - The codes normally start on tag < b:includable id='mobile bla bla bla'>. To remove, just get rid of all codes inside that < b:includable id='mobile bla bla bla'>, only "codes inside that tag", don't include the < b:includable id='mobile bla bla bla'> tag in the removal, cuz that way blogger will rebuild again the codes after you save your changes. Try to find them using keyword "mobile" in your search. There could be three of such code, remove 'em all.

Here Is A Pattern.

Original Code	< b:includable id='mobile-post' var='post'> < div class='date-outer'> < b:if cond='data:post.dateHeader'> < h2 class='date-header'>< span>< data:post.dateHeader/>< /span>< /h2> < /b:if> < div class='date-posts'> < div class='post-outer'> < div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> And bla bla bla < /b:includable>
After Removal	< b:includable id='mobile-post' var='post'>< /b:includable>

That's all. Hope you guys enjoy with your new mobile view.