How to Make a Blogger Default Template Being Responsive

This time I want to share how to make / change the default / default template Blogger to be tough on all fields (screens) aka responsive.

Along with the development in which mobile phones, especially smartphones, have become ... what? The trend is trendy in people all over the world. Making the number of cyberspace surfers from mobile devices increase very rapidly. This makes the web or blog owners are required to be able to adjust the appearance of the blog, both on PC and cellular so that blog visitors from both devices can feel comfortable (user friendly).

Actually Blogger has provided features for cellular display, it's just that the display is still too simple and it feels less supportive in displaying ads. So how do you make the blog / web template responsive without activating cellular display? 

Indeed, there are many tutorials on how to make blog templates responsive, both how to create your own responsive templates and other ways, but what I will share is a new way to make responsive blog templates (Blogger). The results can be seen directly on this blog (use mobile / smartphone).

Before following this tutorial, you should first backup / back up your template, or create a new blog as an experimental material. Read and follow the steps carefully, BEWARE !!! Don't get you wrong the room is ok. 

Please follow the tutorial on how to create responsive Blogger default templates without activating cellular display.

1. Look for the following code, it is located inside tag head.

<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'/>

Delete and replace with the code below.

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

2. Delete the following code or something similar (located inside <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'/>

"Just to remind!!!" 
After creating a responsive Blogspot template, there are a number of things that might need to be done to support responsive blog display, or just make more SEO templates.

• How to change the main page to post snippet and thumbnail
• How to create a responsive dropdown pagelist menu on cellular view
• How to make / change the Blogspot next page button to be a number
• How to modify dynamic h1 heading tags on Blogspot
• How to make responsive YouTube videos on blogspot .
• How to make an image widget in the middle and responsive

Update : Now you can get the default / standard Blogger version of the Responsive with the Sidebar position that can be changed (left, right, two, or without Sidebar). Please see the list HERE . 

3. In the third stage and so on, it will be divided into three groups. 
For the template with the right sidebar, please follow the following link

Right Sidebar

For templates with 2 (two) sidebars on the left and right, please follow the following link

Two Sidebar

For templates with a sidebar on the left , just look for the 
code below (it's located inside <b:template-skin>)

body {


min-width: $(content.width);


}


.main-inner .column-left-outer {


width: $(main.column.left.width);


right: 100%;


margin-left: -$(main.column.left.width);


}

Change or change to below

body {


width: 1100px;


margin:0 auto;


min-width: $(content.width);


}


.main-inner .column-left-outer {


width: 30%;


right: 70%;


position: absolute;


margin-left: -$(main.column.left.width);


}

Then add the following code, just place it under the code above

.main-inner .column-center-outer{


left:35%;


width:65%;


}

The width (main inner)above values can be replaced according to your taste, with a note that the total amount should not exceed 100% (less may or not). To determine the value leftand rightthat is by way of 100% minus the value width (main inner). 

4. Copy then paste the following css code 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 image display does not widen sideways. 

5. Copy then paste the following css code just above the code ]]></b:skin>, please select the css code according to the type of template you are using 

For Simple Templates and Travel Templates use the 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-left-outer{position:relative!important;left:0;margin:auto;width:100%!important}


        .main-inner .column-center-outer{left:0!important;width:100%!important}


        .footer-inner, .main-inner .column-left-inner, .main-inner .column-center-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-left-inner .section, .main-inner .column-center-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-left-inner .section, .main-inner .column-center-inner .section {margin:0;}


      }

For the Awesome PT Templates, use the 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-left-outer{position:relative!important;left:0;margin:auto;width:100%!important}


        .main-inner .column-center-outer{left:0!important;width:100%!important}


        .main-inner .column-left-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 the Image Window Template, use the 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-left-outer{position:relative!important;left:0;margin:auto;width:100%!important}


        .main-inner .column-center-outer {left:0!important;width:100%!important;}


        .main-inner .column-left-inner, .main-inner .column-center-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 the Watermark Template and Softness the code is the same as the Image Window Template but delete the code number 9 (nine) then replace it with the following code

.main-inner .column-center-inner{padding:0}


.main-inner column-left-inner {padding:20px}

6. Save Template 
After the template is saved, then click Back, then turn off the cellular display. See your blog. 

Visit Mobile Friendly Test - Google to find out What is your blog / web Mobile friendlywithout having to activate cellular display? 

Also visit the responsive web checker site to see the blog display on each screen size. 

Note: 
Basically the core css code for all types of Blogger templates is the same, the only difference is in css padding sideandmargin sidefrom each template has different values ​​and locations, the author only experimented on the first template of each type of template. If the results of the display are not suitable (especially on a 320 pixel screen) please just work on it ok.