Many blogging networks like wordpress, weebly, hostgator etc provides mobile sites to their users, similar to them blogger also provides this feature to its users. Blogger provides mobile site as well as templates for mobile sites which are well made for all mobile phone screens. Although blogger is good for blogging as it has desktop and mobile sites but like desktop template you have to optimize your blog for mobile phones. And for this you need to add some Gadgets, so that you could get benefit of your desktop as well as mobile site.
Initially all blogger mobile sites have simple or default templates which allow only specific gadgets such as:
- Header(logo)
- Footer(powered by blogger)
- Page list
- Blog(posts)
- Adsense
- Profile
So you can't get full benefit of your mobile site until you have optimized it. So in this post I will help you to optimize your blog for mobiles so that you could get benefit from your mobile visitors.
In this post you will learn following things:
- How to optimize mobile template(basics).
- How to hide all useless things in mobile site which shouldn't appear on mobile site.
- How to show essential gadgets in mobile template(Related posts, Ads, Follow/Share buttons, Search box).
So lets begin, we will start from optimizing mobile template.
Optimizing Mobile Template In Blogger:
Blogger has many mobile templates e.g simple, dynamic, picture view, Awesome inc, Water mark tec.
And all the templates have different views, all blogger templates have an awesome look but they do not give you full benefit as they don't allow ads and other custom gadgets. So you can't add related posts widget(which is essential to increase page-views).
So you need to use custom template and optimize it. Follow below steps to switch on your custom mobile template.
Step 1: Go to template and click on the icon shown below mobile template.
Step 2: Choose the custom template and click on save.
Congratulations! you have successfully switched on custom template for your blogger mobile site.
Hiding Things In Blogger Mobile Site:
Every blog has something that should be only on desktop such as a gadget. But when a blogger mobile template is switched to custom every thing you have added in your blog template will start appearing in mobile view too. Here I have to mention that only those things appear in mobile sites also if you have added it in template, but if you have added something in layout as a new gadget, it won't appear in mobile site until you have enabled it. So here I am going to show you how to hide something in mobile view of blogger by using xml.
Step 1: Go to template and click on edit html.
Step 2: Click inside the code and search for something which you want to show only in desktop and hide it in mobile site.
<html>
<body>
<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<code>A piece of computer code</code><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<var>Variable</var>
</body>
</html>
<body>
<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<code>A piece of computer code</code><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<var>Variable</var>
</body>
OR
Add something to your template for example a gadget or a comment or a picture.
Step 3: Now just before the code which you want to hide in mobile site paste the following piece of code:
<b:if cond='data:blog.isMobile == "false"'>
and after the code(which you want to hide in mobile site) type </b:if>
Explanation:
For example you have following code and you want to hide it in your mobile site:
<body>
<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<code>A piece of computer code</code><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<var>Variable</var>
</body>
</html>
Then according to above method your code should look like below code:
<b:if cond='data:blog.isMobile == "false"'>
<html><body>
<em>Emphasized text</em><br>
<strong>Strong text</strong><br>
<code>A piece of computer code</code><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<var>Variable</var>
</body>
</html>
</b:if>
Gadgets For Blogger Mobile Site:
Blogger gadgets created by blogger or other websites aren't compatible with mobile sites so you have to use special gadgets for blogger mobile site you can find some mobile site gadgets here.
Showing Things Only In Blogger Mobile Site:
If your blog has something that you would like to show in mobile site only then its possible now, how? Just use the below piece of code above the content which you would like to show only in mobile site:
<b:if cond='data:blog.isMobile == "true"'>
and after it just add this piece of code:
</b:if>
For example I want to show this line in mobile site only "I am fahim, you can call me FK" then in my template it should be like this:
<b:if cond='data:blog.isMobile == "true"'>
I am fahim, you can call me FK
</b:if>
Now it will be shown only in mobile site. You can use this to show related posts widget in blogger mobile site.
Check out: More Mobile Blogging Tutorials To Improve You Mobile Site!
Hope you like this post. If you have any question please help me know by leaving a comment below.
Seach tags: Blogger mobile site,Blogger mobile site,Optimize Blogger Blog For Mobile Phones,Blogger mobile site gadgets,101helper
Showing Things Only In Blogger Mobile Site:
If your blog has something that you would like to show in mobile site only then its possible now, how? Just use the below piece of code above the content which you would like to show only in mobile site:
<b:if cond='data:blog.isMobile == "true"'>
and after it just add this piece of code:
</b:if>
For example I want to show this line in mobile site only "I am fahim, you can call me FK" then in my template it should be like this:
<b:if cond='data:blog.isMobile == "true"'>
I am fahim, you can call me FK
</b:if>
Now it will be shown only in mobile site. You can use this to show related posts widget in blogger mobile site.
Check out: More Mobile Blogging Tutorials To Improve You Mobile Site!
Hope you like this post. If you have any question please help me know by leaving a comment below.
Seach tags: Blogger mobile site,Blogger mobile site,Optimize Blogger Blog For Mobile Phones,Blogger mobile site gadgets,101helper
EmoticonEmoticon