Cambiando la plantilla para móvil de Blogger.
La plantilla de móvil de blogger, viene incluida con un código condicional, de tal forma que solo se puede ver si usamos un dispositivo móvil.Personalizar nuestra plantilla.
Los gadgets que por defecto aparecen en la versión móvil son:
- Header. Que es el gadget de la Cabecera del blog. Por lo tanto si utilizas una imagen en la cabecera del blog, también aparecerá en la versión móvil.
- Blog. El gadget de las entradas.
- Profile. Es el perfil del autor (es) del blog.
- PageList. Que es el gadget de "Lista de páginas".
- AdSense. El gadget de la publicidad de Adsense.
- Attribution. El gadget con el crédito de la plantilla y el crédito de las imágenes si se usaran las que Blogger facilita desde el diseñador de plantillas.
Personalizar a la versión móvil.
Vamos a meter una metaetiqueta para que detecte el tipo de dispositivo, y ajustar la pantalla según los estilos.
Para ello nos vamos a Plantilla> Editar Html> Ctrl+F y buscamos la etiqueta <head>.
Agregamos el código en cualquier parte de esta etiqueta.
<meta content=’width=device-width,initial-scale=1.0,maximum-scale=2.0‘ name=’viewport‘/>
Definir el tamaño de nuestra cabecera.
Para definir el logo o la imagen de nuestro blog a la hora que se vea en la plantilla movil y definir la resolucion del dispositivo está entre 320 y 480 Pixeles
Con la etiqueta Widht, la que vamos a hacer es que se vea el 100%, lo cual significa que se verá en todo el ancho de la pantalla.
Para hacer este cambio nos vamos a :
Plantilla>Editar HTML> CTRL+ F y buscamos la etiqueta:
]]></b:skin> y justo encima de esta etiqueta pegamos este código:
Para hacer este cambio nos vamos a :
Plantilla>Editar HTML> CTRL+ F y buscamos la etiqueta:
]]></b:skin> y justo encima de esta etiqueta pegamos este código:
@media only screenand (min-device-width : 320px)and (max-device-width : 480px) {#logo, #text-logo{width:auto;height:auto;margin:10px auto;}
Oculta los gatdget de nuestra cabecera
Para ocultar los gatdget de nuestra cabecera y esto hiciera que no se viera en condiciones, tenemos la opción de ocultarlo.
Podemos agragar en los estilos este código.
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#AQUÍ-EL-ID-DEL-GADGET{
display:none;
} }
Y solo cambiamos lo marcado en morado la Id del gatdget que queramos ocultar.
Ahora haremos responsive las entradas; solo agregamos los estilos:
@media screen and (max-width:768px) {
#main {
width: 100%; } }
Con este paso también tendríamos listas las entradas, con un ancho de 100%.
Ocultar la Sidebar
para ocultar la sidebar, solo debemos de agragar en los estilos este código:
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#sidebar{
display:none;
} }
Y ya estará oculta.
No olviden agregar:
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#AQUI-EL-ID-A-APLICAR-ESTILOS{
AQUI LOS ESTILOS
} }
Y cambiar lo marcado en morado por la Id del gatdget de los estilos
Imprimir entrada
No hay comentarios:
Publicar un comentario
Deja tu comentario y en breve te contestaremos