Monday, October 12, 2015

How To Apply Different Templates For Mobile & Desktop In Blogger?
Apply Different Templates
Don't you think that publishing posts about only one topic is boring? We are publishing posts in the "How To Become A Blogger" series these days for normal peoples who want to be a pro-blogger. But, what about the readers of Blogger Guider who knows the things we're publishing in that series? For those visitors, to take care of them, we have brought a fabulous post that will help you to apply different templates for Mobile and Desktop.

Let Me Tell You A Story Of A Blogger

Once upon a time, there was a blogger whose name was "Harmit". He was a very good blogger. His writing skills was awesome and the post he always writes on his blog was awesome. He was receiving 100-500 pageviews per day because his blog was new but was performing better than his competitor's blog. He was very honest in his work.

Once, he got a message in his email, the message was like this:
Hi Harmit! Good to see you blogging on your blog. I am a daily visitor of your blog but one thing about your blog is not good. I am giving you a suggestion. Your blog's design is not good in desktop. But it is awesome in Mobile. So, please improve it for desktop devices. Thanks, Satwar.
Now, Harmit got upset. His blog was on cooking niche and so, he had no experience about coding nor he had money to hire a web designer. So, he searched for a free template on internet and found one very attractive template for free! But the thing was- that template was attractive when seen on desktop device but was not good when seen on Android or iPhone.

Now, Harmit wished for a way by which, he could add both templates in his blog. One should appear only on Mobile and one should appear only on Desktop.

How To Apply Different Template For Mobile & Desktop?

It is a easy way. The thing you will get after reading this whole post is- When your visitor will visit your blog with mobile view, he will view the Sevida template look of your template. And when, he will view your blog from desktop, he will get Mexider look of your template. These template are just example. You can put any template for mobile and any template for desktop by following the below steps:
  1. Collect the .xml files of the two templates. For now, let us take example of Sevida for mobile and Mexider for Desktop.
  2. Now, open both .xml files. Copy the following code and paste it on a new notepad file.
  3. <!DOCTYPE html>
    <b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
    For Desktop Head Template Codes
    <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
    For Mobile Head Template Codes
    <b:section id='nothing'></b:section>
    <b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
    For Desktop Body Template Codes
    <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
    For Mobile Body Template Codes
  4. Now, copy the codes which are in "<head>" section of the template you want to show in desktop and replace "For Desktop Head Template Codes" in the code zbove with it.
  5. Now, do the same with the template you selected for mobile devices. Copy all the code which is inside "<head>" tag and replace "For Mobile Head Template Codes" with that codes.
  6. Now, copy codes of "<body>" section from both the template replace "For Desktop Body Template Codes" and "For Desktop Mobile Template Codes" respectively.
  7. Now, save your template.
[info headline="Fact!"]Do you know? Doing this, you are not increasing your page loading speed. The both templates you applied will not load in opposite devices. Like, desktop template will not load in mobile and mobile template will not get load in desktop![/info]

Need Help?

I know this tutorial is not so easy for everyone. If you want any kind you help, you can contact me or leave a comment below. I hope it helped you a lot. It is the first-on-net tutorial which has told you how to apply different templates on Mobile & Desktop in blogger. Thanks!