How To Make Blogger Theme Fully Responsive | Fit Any Screen Sizes

mixanikos365
Author - mixanikos365
12:02 ص


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.


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>
Warning: This code post-body img{width:100%; Set your images and icons to be 100% Width 
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>
Tags

عرض المزيد

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !
مشاركة في التطبيقات الأخرى
Copy Post Link