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
No, I am not talking about some grand, messianic vision or something. I am talking about a vision that will define where all the Internet marketing efforts will go to. SEO Antwerpen
ReplyDeleteFinding a suitable camera, camcorder or mobile is not always the easiest thing to do. Here is a review of some of the more popular mobiles phones and cameras. 자급제폰
ReplyDeleteA solar panel is a sizable flat, rectangular shape, usually somewhere between the dimensions of a radiator and a door. Power collectors, called solar cells, make up solar panels. www.zonnepanelen-soloya.nl/beste-zonnepanelen-merken
ReplyDeleteNow, if you ignore something, it is possible that they will actually become extremely important, and you 'local employees realize that you made a mistake. but only the larger error is ignored, since you are overriding, or try to do everything hafway and accomplish nothing. SEO
ReplyDeleteAny extra electricity you create using your solar panels, if you're attached to the grid, will be paid for by the utility company. Accounting for a solar energy system's electricity production and enabling utilities to purchase excess energy from homeowners, net metering is allowed in 30 states. Zonnepanelen plaatsen
ReplyDeleteAgain, social media platforms want users to stay on them for as long as possible. Feel free to take advantage of the tools they offer. It's a win-win for you and the platform. social media discussion
ReplyDelete