How To Create a Blogger Responsive Default Template

Buddy BlogSeo, if you are a blogger user, and you are looking for how to make default blog template to be responsive, here blogseo will explain. We will edit the default blogger template to be responsive.
Actually bloggers themselves have provided a mobile template settings that you can set to display "mobile view". But many of us are less like it because many widgets in the sidebar is missing, also our footer that only displays "Powerred by Blogger".
And below BlogSeo explain how to create blogger template be responsive

How to Make Template Be Responsive

First. Find the following code below, this code is located under the code <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'/>

And replace with the code below ini

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

Second. Find the following code and delete the code located inside the code <b:templat-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'/>

Third. Find the following code under <b: template-skin>

body {
min-width: $(content.width);
}


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

Replace with the following code

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);
}
.main-inner .column-center-outer{
float: left;
width:65%;
}

Fourth. Add the following css according to the type of template you put above.
Put the code above </b:skin>

CSS Responsive Simple Template

/*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;}
      }

CSS Responsive PT cool

      @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;}
      }

CSS Responsive Picture window templates

        @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;}
      }

watermarks and softness template

/*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-inner{padding:0}
        .main-inner .column-right-inner{padding:20px}
        .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;}
      }

Next add the following css above </b:skin> So that the image does not widen to the side.

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

Done

Use this way to get responsive header images.

How to create a responsive header image

By using the above method you have managed to make blogger templates become responsive.

Tags: