Código
Css para que el tema o la plantilla de Blogger sea completamente adaptado para version móvil. Podemos usar las plantillas móviles que nos ofrece blogger, pero la verdad, son un poco sencillas o mucho diría yo. Por mucho tiempo busque algo para adaptar o acomodar la plantilla de mi blog a la version móvil o tablet, hasta que encontré una solución, aunque esto funciona un 99 por ciento, puedes tratarlo a tu blog y espero que te funcione. Sin mas que decir vamos con el código.
Nota muy importante, esto solo va a funcionar si encuentras esto en la plantilla de tu blog:
]></b:skin> ]]> </b:template-skin>
De lo contrario no funcionara, lo siento si no encuentras esto en tu plantilla :(
Paso numero 1: Encuentra esto en la plantilla de tu blog:
<meta expr:content='data:blog.isMobile ? "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" : "width=1100"' name='viewport'/> y cambialo por esto:
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> ahora busca: ]]></b:skin>
Seleccionado hasta llegar a:
]]></b:template-skin
Ahora cambia el
pega el código css
Para los que tiene solo 1 sidebar copien este código: /*CSS para adaptar plantilla a version movil*/ .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> Para los que tienen 2 sidebar copien el código de abajo: /*CSS para adaptar plantilla de blogger a version móvil*/ .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> Para los que tienen 3 sidebar copien el código de abajo: /*CSS para adaptar plantilla de blogger a version móvil*/ .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>
para buscar cualquier codigo en la plantilla, usen las teclas:
Ctrl + f
