Septiembre es mes de comienzo de curso y vuelta a nuestras rutinas después la «relajación» veraniega. Desde el blog os propongo volver a vuestra época de estudiante con el curso para personalizar vuestra plantilla móvil de blogger. Antes de seguir con la segunda lección, os dejo los dos primeros posts.

 

 

En la lección de hoy vamos a crear un menú que podría sustituir perfectamente el menú de páginas con desplegable que os ofrece blogger en su versión móvil. Haremos y personalizaremos un gadget HTML que solo será visible en la versión móvil. En el podréis añadir cualquier tipo de link como a páginas independientes, conjunto de etiquetas, enlaces externos,…¿Empezamos?

Si tenemos un menú de páginas en nuestro blog, lo deberemos ocultar en la versión móvil. Vamos a Plantilla→editar plantilla y buscamos (Ctrl+F) </b:skin>. Encontraremos <b:skin>….</b:skin>. Click en los puntitos para abrir la parte del CSS de la plantilla y bajamos hasta encontrar la sección dedicada al móvil.

 

/*Mobile
—————————————*/

 

Dentro de ella, copiamos este código para ocultar nuestro menú de paginas en la versión móvil.

 

.mobile #PageList1 {display:none;}

 

Guardamos y comprobamos en el móvil que ya no aparece.

 

 

Vamos a diseño y comprobamos que podemos añadir un gadget HTML debajo de la cabecera*.
Copiamos el siguiente código , previamente personalizado con nuestros datos, y arrastramos el gadget donde marca la foto. Guardamos los cambios.

 

<a href=’Url del link’>TEXTO1</a>
<a href=’Url del link’>TEXTO2</a>
<a href=’Url del link’>TEXTO3</a>

 

Nota: Si quieres otro enlace puedes añadir otra línea pero ten en cuenta que el reducido tamaño de la pantalla de móvil para que siga siendo un texto legible.

 

 

*Nota: He comprobado que en todas la plantilla de pruebas que tengo, te sale esta opción menos en la mía propia. No se exactamente porque pero también tengo la solución para hacer que blogger nos permita añadir más gadget en esta zona. Puede que de tanto toquetear mi plantilla este un poco mareada y no me muestre esta opción. A continuación os dejo la solución.

 

ACTUALIZACIÓN (Febrero 2016)


Gracia a Lidia Segura del blog Nunca es demasiado Dulce que me comentó que en su blog no le salía la opción de añadir un gadget debajo de la cabecera, he buscado la manera que crear un espacio para blogger te permita añadir gadgets en esa zona. Como podéis observar en la foto su plantilla no le ofrece esa posibilidad.

 

Podría haber hecho un tutorial pero El blog de Ciudad blogger lo explica genial en su post Cómo añadir gadgets debajo de la cabecera de blogger.

 

Para dar estilo simple CSS al menú

 

 

1.-Saber el Id del nuevo gadget: desde diseño ponemos el ratón encima de Editar del gadget que acabamos de crear y abajo nos saldrá un número muy largo. El id te lo marco con un recuadro : HTML10 (en mi caso).

 

 

2.- Vamos a editar plantilla y buscamos (Ctrl+F)  </b:skin>. Abrimos la sección de CSS (dando a los puntitos que hay entre <b:skin>…..</b:skin> y bajamos hasta que encontremos la sección dedicada al móvil.

 

.mobile #IDgadget {
margin: 0 auto;
width: 95%; /*tamaño del gadget. Lo disminuí para que se viera adaptado en mi móvil*/
background: #ffffff; /*color fondo*/
font: normal normal 12px quicksand; /*fuente y tamaño*/
text-align: center;
border-top: 1px solid #333333; /*borde superior*/
border-bottom: 1px solid #333333; /*borde inferior*/
padding:6px; /*tamaño del espacio entre los bordes o fondo*/
margin-bottom: -20px; /*para acercar (-) al elemento inferior. */
.mobile #IDgadget a{
   padding:0px 8px ; /*separación entre los elementos del menú*/
   color:#333333; /*Color del texto*/
}
 

 

Nota: Esto solo es un ejemplo. Podéis cambiar el tipo de bordes (solid, dashed, dotted, double,..), el lugar  (top, bottom, left o right) o si queréis que enmarque todo el menú (border: 1px solid #código de color, por ejemplo). Ir probando y sed creativos.
Sobre al fuente→podéis utilizar las que trae blogger o instalar una chula y legible, como yo hice, desde Google Fonts.
Sobre la línea margin-bottom: solo sirve para ajustar los espacios entre elementos. Yo la tuve que añadir pero quizás vosotros no la necesitéis. Probar primeros sin ella y ver el resultado para decir si os hace falta ajustar espacio o no.

 

 

Poner una imagen como fondo del menú

 

Otra opción para darle todavía un toque más especial y personal a vuestro menú es añadir una imagen como fondo. Hay varias formas de hacerlo y posiciones que se pueden elegir para la misma pero bajo mi punto de vista para la versión móvil que todo es más reducido mejor simplificar las cosas y poner un fondo uniforme y que sobre todo que permita seguir leyendo bien las letras.

 

Primero tendréis que definir el valor del ancho de vuestro blog (Plantilla→personalizar→ancho del blog.) Mi ancho es 1200px así ese es tamaño que deberá tener la imágen por unos 50px de alto. Con cualquier programa de diseño/edición como pickmonkey o photoshop diseña una imagen de 1200x50px y añadirle un color, estampado o patrón que vaya a corde con vuestro blog. Yo opté por hacer un documento nuevo de esa medida con photoshop y crear dos capas para ver cual me quedaba mejor en el blog. Una capa con un pincel efecto acuarela y la otra con un padrón/fondo de mi tablero de Pinterest. Para poder usarla en vuestro blog debereis subirla previamente a una web de almacenamiento de imágenes como dropbox, picassa, google drive, tinypic,…..

 

El código CSS a añadir a la plantilla quedará así:

 

.mobile #IDgadget {
margin: 0 auto;
width: 95%; /*podéis poner 100% para que ocupe toda la pantalla*/
background: url(«http://i59.tinypic.com/2rly9f9.jpg») no-repeat;/*url de la imagen*/
font: normal bold 12px quicksand ; /*fuente y tamaño. Añadí bold para que resultara una letra más legible*/
text-align: center;
padding:6px;
margin-bottom: -20px;
}
.mobile #IDgadget a{
padding:0px 8px ;
color:#333333; /*Color del texto*/
}

 

FONDO CON EFECTO ACUARELA

 

FONDO CON ESTAMPADO GEOMÉTRICO

 

 

Ocultar el nuevo gadget en nuestra versión web

Seguimos editando la plantilla, hacemos click en Ir al widget y seleccionamos el ID de gadget nuevo (en mi caso HML10). Escribimos  mobile=’only’  para que solo se muestre en los dispositivos móviles. Comprobamos que ya no aparece en la vista previa y guardamos plantilla.

 

 

Actualización (Marzo 2106)
Hace unos días mi compañera Minerva Aurora, compartió en su blog un genial tutorial de como hacer un menú desplegable responsive para blogger. Seguro que habéis visto en un montón de webs el típico menú de la tres rayas horizontales que al desplegarse se ven todas las pestañas. Pues me pareció interesante añadir esa opción a este post.

 

Bueno. pues esto es todo por esta semana. ¿Qué te ha parecido esta opción para personalizar tu menú?. ¿Te quedas con la opción simple o te atreves con una imagen?.
Ahora te toca a ti. Me encantaría que me enseñaras los cambios que vas practicando. Así que si compartes tus avances por tus redes, etiquétame para verlo. Un besito y hasta la semana que viene.

 

 

¿Te ha sido de utilidad el artículo?
(Votos: 0 Promedio: 0)

¿Quieres descubrir las "7 Claves para tener un negocio online Rentable y Visible con menos de 200 visitas diarias?

Recuerda, el tamaño aquí tampoco importa...

The following two tabs change content below.

Ana María

Mamá, bloguera y emprendedora por sorpresa con alma inquieta. El diseño es mi pasión y la redes sociales mi hábitat preferida. Mi misión: ayudar a otros bloggers a crear su proyecto online de una manera creativa, personalizada y profesional.

BLACK WEEK PARA EMPRENDEDORES DIGITALES


Cada día es UNA OPORTUNIDAD para impulsar un áera concreta de TU NEGOCIO 

INSTAGRAM – ASESORÍAS ESTRATÉGICAS – DISEÑO WEB – TIKTOK PARA EMPRENDEDORES

Pin It on Pinterest