How to Make Responsive Blogger Template

What is it Responsive Template?

design template that refers to the method percent (%), so it can adapt to all devices. Its width will always adjust to the device being used, whether it is mobile, tablet or desktop. Size images, writings and all the elements come to adjust as well. So that mobile users can feel the comfort of what is perceived by the users desktop

Why make it?

Increased smartphone users around the world, causing a high increase in the number of visitors from mobile devices. For their convenience, the website owner required to adjust page views, either on a computer or mobile device, so that visitors can feel comfortable both devices (user friendly).

Actually, Blogger is already providing features for mobile viewing. But zoom is still too simple, and likely less supportive in showing ads. Then, how to make Blogger template mobile friendly, without activating the mobile display?

How to create a template to be responsive?

Already many tutorial how to create a blog theme or template became responsive. But, what I want to share is a new way. This time Bakul Oreg want to share how to create / modify the standard template of Blogger be fitted on all screens (responsive). Before following this tutorial, you should first back up your template, or create a new blog as an experiment. follow carefully so as not to get lost.

Please follow the tutorial how to create a default responsive Blogger template without activating the mobile display.

1. Find code like below, it's located in the head tag

<meta expr:content='data:blog.isMobile         ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot;         : &quot;width=1100&quot;' name='viewport'/>

Remove and replace it with the code below.

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

2. Remove the code below or something similar (located in the <b:template-skin>).

<b:variable default='960px' name='content.width' type='length' value='960px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
<b:variable default='310px' name='main.column.right.width' type='length' value='310px'/>

3. Copy the css code below and paste it just above the code ]]></b:skin>.

.separator a{margin-left:0px!important;margin-right:0px!important;}
.post img{max-width:100%;height:auto;}

This code works so that the display image is not extending to the side.

4. In the fourth stage onwards will be divided into three groups
To the left sidebar template please follow this link

Sidebar-Left

For a template with two (2) on left and right sidebar please follow this link

Two Sidebar

Now you can get the default blogger template already responsive (free). Check here.

For a template with a sidebar on the right, stay here.
Find the code as below (located in the <b:template-skin>)

body {
min-width: $(content.width);
}
.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
}

Change or replace be as below

body {
width: 1100px;
margin:0 auto;
min-width: $(content.width);
}
.main-inner .column-right-outer {
width: 30%;
float: right;
margin-right: -$(main.column.right.width);
}

Then add the following code, placed just below the code above

.main-inner .column-center-outer{
float: left;
width:65%;
}

Value width (.main-inner) above, can be changed to your liking, on the condition that the maximum amount of 100%

5. Copy the code css below, then paste it just above code ]]></b:skin>, Please select css code, in accordance with the type of template you are using.

For users Simple Templates and Travel Template, please copy css code below

/*Responsive*/
      @media screen and (max-width:1024px){
        body{width:100%!important;padding:0;}
        .content-inner{overflow: hidden;}
      }
      @media screen and (max-width:768px){
        .main-inner .column-center-outer, .main-inner .column-right-outer{float:none;width:100%!important;}
        .footer-inner, .main-inner .column-center-inner, .main-inner .column-right-inner{padding:0;}
        .Header h1{font-size:30px;text-align:center;}
        .Header .description{font-size:14px;text-align:center;}
      }
      @media screen and (max-width:414px){
        .footer-inner .section, .main-inner .column-center-inner .section, .main-inner .column-right-inner .section {margin:10px;}
      }
      @media screen and (max-width:320px){
        .fauxcolumn-right-outer .fauxcolumn-inner{border-left:none;}
        .fauxcolumn-left-outer .fauxcolumn-inner{border-right:none;}
        .footer-inner .section, .main-inner .column-center-inner .section, .main-inner .column-right-inner .section{margin:0;}
      }

For users Awesome Inc. template, please copy code css below

/*Responsive*/
      @media screen and (max-width:1024px){
        body{width:100%!important;padding:0;}
        .content-inner{overflow: hidden;}
      }
      @media screen and (max-width:768px){
        .main-inner .column-right-outer, .main-inner .column-center-outer{float:none;width:100%!important;}
        .main-inner .column-right-inner, .main-inner .column-center-inner{padding:0}
        .main-inner .section {margin:0 15px}
        .Header h1{font-size:30px;text-align:center;}
        .Header .description{font-size:14px;text-align:center;}
      }

For users Picture Window Template, please copy css code below

/*Responsive*/
      @media screen and (max-width:1024px){
        body{width:100%!important;padding:0;}
        .content-inner{overflow: hidden;}
      }
      @media screen and (max-width:768px){
        .main-inner .column-right-outer, .main-inner .column-center-outer{float:none;width:100%!important;}
        .main-inner .column-center-inner, .main-inner .column-right-inner {padding:0}
        .Header h1{font-size:30px;text-align:center;}
        .Header .description{font-size:14px;text-align:center;}
      }
      @media screen and (max-width:320px){
        .main-inner .section{margin:0 10px}
        .post-outer {padding:10px 10px;}
      }

For users template Watermark or Ethereal, same code as Picture Window template, but remove the code number 8 and replace it with the code below

.main-inner .column-center-inner{padding:0}
.main-inner .column-right-inner{padding:20px}

6. Save Theme
After the template is saved, then click the Back button, then turn off mobile display. View your blog.

Visit Mobile Friendly Test - Google to find out, What is a blog / web mobile friendly, without activating the mobile view?

Visit Responsive web checker to see the look of your blog on any screen size.

Note :
I only test on the first template, for each type of theme. (except Dynamic Template).

Next
How to display post excerpt and thumbnail on the homepage of the blog.