Tuesday 18 April 2017

How To Apply Different Templates For Mobile & Desktop In Blogger

       No comments

Apply Different Templates

Don't you think that publishing posts about only one topic are 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.

How To Apply Different Template For Mobile & Desktop?

It is an easy way. The thing you will get after reading this whole post is- When your visitor will visit your blog with a mobile view, he will view the Nevada template look of your template. And when he will view your blog from the desktop, he will get Mexider look of your template. These templates are a just example. You can put any template for mobile and any template for the desktop by following the below steps:
  1. Collect the .xml files of the two templates. For now, let us take the example of Nevada 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>
    <HTML>
    <head>
    <b:skin></b:skin>
    <b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
    For Desktop Head Template Codes
    </b:if>
    <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
    For Mobile Head Template Codes
    </b:if>
    </head>
    <body>
    <b:section id='nothing'></b:section>
    <b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
    For Desktop Body Template Codes
    </b:if>
    <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
    For Mobile Body Template Codes
    </b:if>
    </body>
    </head>

  3. 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 above with it.
  4. 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.
  5. Now, copy codes of "<body>" section from both the template replace "For Desktop Body Template Codes" and "For Desktop Mobile Template Codes" respectively.
  6. 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, a desktop template will not load in mobile and a mobile template will not get a 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!

0 comments:

Post a Comment