Make Your Blogger Theme Totally Responsive

We are going to make a responsive blogger theme for the sidebar at the right, left & for double sidebar, i.e, theme having both right and left sidebars. Your theme should be of Picture Window, simple theme, travel theme, watermark theme, etc.

Video Tutoral at https://youtu.be/jwIYuQwmobg

1. Right Sidebar Responsive Theme

i. Choose the right sidebar by going to Theme tab-Customize-Layout.

ii. Find this code under your <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'/>

iii. Replace the above code with the new code below:

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

iv. Select code from ]]></b:skin> to till ]]></b:template-skin> and replace with the following code:

/*CSS for responsive theme*/

.post-body iframe {width: 100%; display: block;} .post-body img {width: 100%; display: block; margin: -5px;}
.separator a {margin-left: 0px!important; margin-right: 0px!important;} .post img {max-width: 100%; height: auto;}
@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;}     

.Header h1{font-size: 35px; text-align: center;} .Header .description {font-size: 13px; text-align: center;}

.footer-inner, .main-inner .column-center-inner, .main-inner .column-right-inner {padding: 0;}}       

@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;}     
       
]]></b:skin>

<b:template-skin>
     
<![CDATA[
   
body {width: 1133px; 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: 70%;}
#layout {min-width: 0;}
#layout .content-outer {min-width:0; width: 800px; margin-left: 1px;}
#layout .region-inner {min-width: 0; width: auto;}       
body#layout div.add_widget {padding: 8px;}
body#layout div.add_widget a {margin-left: 32px;}       

]]></b:template-skin>

2. Left Sidebar Responsive Theme

i. Choose the left sidebar by going to Theme tab-Customize-Layout.

ii. Find this code under your <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'/>

iii. Replace the above code with the new code below:

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

iv. Select code from ]]></b:skin> to till ]]></b:template-skin> and replace with the following code:

/*CSS for responsive theme*/

.post-body iframe{width:100%; display:block;}.post-body img{width:100%; display:block; margin:-5px;}
.separator a{margin-left:0px!important;margin-right:0px!important;}.post img{max-width:100%;height:auto;}
@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;}}

]]></b:skin>

 <b:template-skin>

 <![CDATA[

body {width:1133px;margin:0 auto; min-width:$(content.width);}
.main-inner .column-left-outer {width:30%;right:70%; position:absolute; margin-left:-$(main.column.left.width);}
.main-inner .column-center-outer{left:30%; width:70%;}

#layout {min-width: 0;}
#layout .content-outer{min-width:0; width:800px; margin-left:1px;}
#layout .region-inner{min-width:0; width:auto;}     
body#layout div.add_widget{padding:8px;}
body#layout div.add_widget a{margin-left:32px;}       
 
]]></b:template-skin>

3. Right & Left Sidebar Responsive Theme

i. Choose double sidebar by going to Theme tab-Customize-Layout.

ii. Find this code under your <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'/>

iii. Replace the above code with the new code below:

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

iv. Select code from ]]></b:skin> to till ]]></b:template-skin> and replace with the following code:

/*CSS for responsive theme*/

.post-body iframe{width:100%; display:block;}.post-body img{width:100%; display:block; margin:-5px;}
.separator a{margin-left:0px!important;margin-right:0px!important;}.post img{max-width:100%;height:auto;}
@media screen and (max-width:1024px){body{width:100%!important;padding:0;}}
@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-right-outer{float:none;width:100%!important;}
.Header h1{font-size:30px;text-align:center;}
.Header .description{font-size:14px;text-align:center;} footer-inner, .main-inner .column-left-inner, .main-inner .column-center-inner, .main-inner .column-right-inner{padding:0;}} 
@media screen and (max-width:414px){.footer-inner .section, .main-inner .column-left-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-left-inner .section, .main-inner .column-center-inner .section, .main-inner .column-right-inner .section{margin:0;}}     
     
]]></b:skin>

 <b:template-skin>

<![CDATA[
   
body {width:1133px; margin:0 auto; min-width:$(content.width);}
.main-inner .column-left-outer {width:20%; right:80%; position:absolute; margin-left:-$(main.column.left.width);}
.main-inner .column-right-outer {width: 20%; float:right; margin-right:-$(main.column.right.width);}
.main-inner .column-center-outer{left:20%; width:60%;}
#layout {min-width: 0;}
#layout .content-outer {min-width:0; width:800px; margin-left:2px;}
#layout .region-inner {min-width:0; width:auto;}     
body#layout div.add_widget {padding:8px;}       
body#layout div.add_widget a {margin-left:32px;}

]]></b:template-skin>

NEW POSTS

Main Menu

Make Your Blogger Theme Totally Responsive

No comments

Post a Comment

Latest Posts

Pages

NEW POSTS

Main Menu

Make Your Blogger Theme Totally Responsive

You Might Also Like

No comments

Post a Comment

Latest Posts

Pages