Una plantilla sensible blogger también la gran parte de blogger SEO, hoy en día todos los que usan los navegadores móviles, me refiero a decir que la mayoría de los usuarios son procedentes de una plataforma móvil, por lo que es necesario tener la Plantilla Blogger Responsive.
- Vaya al escritorio de Blogger ► Plantilla.
- Haga clic en el icono de engranaje para el móvil.
- A continuación, seleccione "Sí. Mostrar plantilla móvil en los dispositivos móviles. "Y elegir el tema.(Personalizado)
- Haga clic en el botón de guardar.
Veamos ahora unos detalles más técnicos de cómo se crearía una media query. Siempre que este familiarizado con las hojas de estilo resultará sencillo. Simplemente se trata de declarar las reglas específicas para cada tamaño dentro de una declaración con esta forma:
@media only screen and (max-width: 480px) { … }
Podemos especificar más dándole un ancho máximo y mínimo, por ejemplo:
@media only screen and (min-width: 480px) and (max-width: 768px) { … }
Dentro de los corchetes ubicaremos las reglas específicas de cada medida. No hay consenso sobre los puntos de cambio de las reglas, pero una definición lógica podría ser:
Móviles: max-width:480px
Tableta: min-witdh:480px and max-width: 800px
Desktop: min-witdh:800px and max-width: 1200px
Desktop de alta resolución: min-width:1200px
Para aplicarlo en la plantilla
- Ir a la plantilla ► Editar HTML.
- En el buscador ► Presionando CTRL+F pegar </head>
Sobre/arriba/encima pegar el siguiente código.
<!-- Plantilla Responsive -->
<style type='text/css'>
@media screen and (max-width:1024px){
body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important}
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}
}
@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
}
@media only screen and (max-width:979px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer{width: 100%!important;margin-right: 0!important;}
}
</style>
► Presiona Vista previa y si esta todo en orden Guarda la plantilla y tendrás tu Plantilla del blog Responsive.
► Para verificar escribir http://Nombre del blog.blogspot.com/?m=1.
Pruebalo en Troy test responsive
.PNG)
