11 julio 2016

3 maneras de personalizar tu menú en Blogger

3-maneras-de-personalizar-tu-menu-en-blogger

Hoy ando de estreno! si miras un poco hacia arriba, hay un nuevo menú superior, que ha hecho posible reducir elementos en el sidebar, porque cómo ya te comenté en esta entrada, el sidebar, cuanto más ligero mejor y a poder ser, exclusivamente con los elementos que más te interese potenciar.





He tardado un poquito más de la cuenta en publicar, porque tras estar trabajando intensamente durante más de mes y medio en la creación de un nuevo proyecto, no quería que mi empeño por cumplir las fechas, lo echara todo a perder. Así que, me he tenido que poner un freno mental, para publicar (por primera vez) un lunes y así poder presentarte todo el trabajo, como te mereces.



Te aviso que me he liado la manta a la cabeza y te traigo 3 tutoriales distintos para que puedas crear un menú personalizado en tu blog.

En la serie de tutoriales que he creado para personalizar tu blog con CSS, ya hemos visto:

 Cómo instalar iconos en tu blog para mostrar tus redes sociales

 Cómo poner imágenes o iconos en los botones de compartir el post

 Cómo instalar un botón de subir con imágenes o iconos

 Cómo sustituir entradas antiguas y recientes por iconos

 Cómo personalizar la caja final del post en Blogger

 Cómo personalizar el sidebar de Blogger con CSS


Así que el menú horizontal, ya tocaba, se ha hecho esperar, pero aquí está por fin. Y como te digo, no te traigo uno, te traigo 3 maneras distintas de personalizar tu menú en Blogger.

La primera, te la muestro con detalle en esta entrada. Las otras 2, las podrás ver si te unes a la Comunidad Demo 2.0, en la que encontrarás guías gratuitas, descuentos en los productos Demo 2.0 y contenidos exclusivos. Cada dos semanas, publico contenido exclusivo en la comunidad y precisamente hoy toca, así que, no tardes en apuntarte si te gustaría incluir un menú personalizado a tu gusto, como el que puedes ver ahora mismo en este blog. Aquí puedes ver las ventajas de unirte a la Comunidad Demo 2.0, que además es completamente gratis:






Y ahora vamos con los menús personalizables.


OPCIÓN 1: MENÚ PERSONALIZABLE DE BLOGGER



menu-personalizado-para-blogger




Blogger cuenta con un gadget de páginas para crearte un menú horizontal, al que se le puede sacar bastante partido con ayuda de CSS, porque el que muestra una vez que configuras el gadget, es más feo que un frigorífico por detrás.


menu-de-blogger-sin-personalizar




Vamos a ver cómo ponerlo requetebonito:


 Lo primero que tienes que tener claro es qué paginas quieres que conformen tu menú y crearlas si aún no lo has hecho. Para crear páginas en Blogger, tan sólo tienes que ir al apartado Paginas y pulsar en Página nueva. Elígelas bien, ya que Blogger sólo te permite crear 20 páginas.

No hace falta que las rellenes, si aún no las tenías creadas. Con ponerle un título y darle a publicar, tienes bastante, ya las editarás más tarde.


 Una vez, tienes creadas todas tus páginas, dirígete al apartado Diseño y verás que bajo la cabecera (header), te aparece un elemento llamado crosscol o Cross-Column que te da la opción de Añadir un gadget. Púlsalo y elige la opción Páginas entre todos los elementos que te muestra.

Cuando le des, verás que aparecen todas las páginas que hayas creado en tu blog y además una opción para Añadir enlace externo, que resulta muy útil cuando necesitas enlazar a algún sitio externo de tu blog, como por ejemplo, una tienda online, que tengas en otro dominio. Marca todas las páginas que quieres que se muestren en tu menú, ordénalas según prefieras que aparezcan y guarda los cambios.

Ahora verás que bajo la cabecera te aparece el menú sosete que te mostré antes, con las páginas que has elegido. ¿Queda raro, verdad? menos mal que existe el CSS, venga, vamos a hacer milagros con esto!

 Dirígete a la Plantilla>Editar HTML (recuerda hacer una copia de seguridad antes de meterte a toquetear) y haz clic en cualquier sitio dentro de la plantilla para pulsar Ctrl+F y que te salga la caja de búsqueda,  pega: <b:skin> y pulsa intro.

Aquí comienzan las hojas de estilo de tu blog, divididas por secciones, así que iremos bajando, hasta encontrar la que necesitamos que es Tabs (mira el vídeo que tienes más abajo para no liarte)

Justo debajo verás que te aparece algo parecido a esto:

.tabs-inner .section:first-child {$(header.bottom.border.size) solid $(tabs.border.color);}



.tabs-inner .section:first-child ul {

  margin-top: -$(header.border.size);

  border-top: $(header.border.size) solid $(tabs.border.color);

  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);

  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);

}



.tabs-inner .widget ul {

  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;

  _background-image: none;

  border-bottom: $(tabs.border.width) solid $(tabs.border.color);



  margin-top: $(tabs.margin.top);

  margin-left: -$(tabs.margin.side);

  margin-right: -$(tabs.margin.side);

}



.tabs-inner .widget li a {

  display: inline-block;



  padding: .6em 1em;



  font: $(tabs.font);

  color: $(tabs.text.color);

  border-$startSide: $(tabs.border.width) solid $(content.background.color);

  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);

}



.tabs-inner .widget li:first-child a {

  border-$startSide: none;

}



.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {

  color: $(tabs.selected.text.color);

  background-color: $(tabs.selected.background.color);

  text-decoration: none;


}




Pues eso es precisamente lo que vamos a personalizar. Ve mirando el vídeo, para que lo veas todo con detalle y no te equivoques. Aquí te dejo mi opción de personalización, pero en el vídeo que encontrarás debajo, te cuento cómo ponerlo totalmente a tu gusto:

.tabs-inner .section:first-child {border: 0px solid #a5a5a5;}



.tabs-inner .section:first-child ul {

  margin-top: 0;

  border: 2px solid #becfe7;

  border-radius: 50px;

}



.tabs-inner .widget ul {

  background: transparent;

  margin-top: $(tabs.margin.top);

  margin-left: -30px;

  margin-right: -30px;

}



.tabs-inner .widget li a {

  display: inline-block;

  padding: 15px 122px;

  font: 16px;

  text-transform: uppercase;

  color: #becfe7;

  border-$startSide: 0px solid #becfe7;

  border-$endSide: 0px solid #becfe7;

}



.tabs-inner .widget li:first-child a {

  border-$startSide: none;

}



.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {

  color: #ffffff;

  background-color: #becfe7;

  text-decoration: none;


}




No te líes, mira el paso a paso del vídeo:




¿Te ha gustado este tutorial?

Pues también puedes ver cómo personalizar un menú superior con buscador + redes sociales y un menú superior con buscador+redes sociales desplegable en la Comunidad Demo 2.0.



menu superior con redes y buscador menu superior desplegable con redes y buscador




¿A qué esperas para apuntarte? no lo pienses más, todo son ventajas!








Y con esto me despido, me encantaría que me contaras qué te han parecido estas propuestas de personalización ¿habías personalizado ya tu menú? ¿cual es el que más te ha gustado? ¿sobre qué te gustaría que hablara en los próximos posts? cuéntamelo todo, que estoy deseando de leerte 

Que tengas un gran día!





26 comentarios:

  1. ¡Hola guapa!
    Sin duda un tutorial que me va a venir de perlas a la hora de renovar mi blog.
    Aunque ya tengo instalado el menú desplegable en mi actual blog, como quiero rehacer (si lo consigo)toda la plantilla y claro está, no sé qué tutoriales seguí para tener lo que tengo ahora en el blog (lo sé soy un desastre), sin duda voy a atiborrarme de todos los tutoriales que vas haciendo.
    Así que una vez más, gracias por todo lo que nos vas enseñando.
    Por cierto el menú superior te ha quedado de escándalo. Y contentísima de que estrenes curso. Seguro que es un éxito.
    Besos

    ResponderEliminar
    Respuestas
    1. Muchas gracias Carolina, ojalá. Ya tenía ganas de cambiar el menú y reestructurar un poco el blog antes de pasar a WordPress. Estoy segura de que cuando te decidas a cambiar la estética del blog, lo vas a hacer genial. Tú sí que me ayudas con tus contenidos, el de la media naranja me ha encantado, besotes!

      Eliminar
  2. Una entrada más que interesante. Yo estuve mucho tiempo investigando cómo poner iconos y demás, me hubiera venido genial este post. Lo único que decicí migrar a Wordpress, pero es interesante aprender cosas así por si hay que ayudar a alguien.

    ResponderEliminar
    Respuestas
    1. Pronto me cambiaré a WordPress Ruth, espero echaros una mano allí, un beso!

      Eliminar
  3. ¡Hola guapa!

    La verdad que eres una crack, tan solo, por saber manejar el html que para mi es una auténtica locura. No suelo hacer cambios, porque para mi es una locura, también es verdad, que no me he puesto, que si me pongo seguro que al final, le pillo el truco. A mi normalmente me hacen los cambios y digamos me he acomodado bastante en ese aspecto. Un beso guapa

    ResponderEliminar
    Respuestas
    1. Es que te tiene que gustar Lidia, yo al principio era una negada, pero como quería aprender porque después me encantaba ver los resultados, pues aprendí. Yo soy de las que me tiene que gustar lo suficiente o suponerme un reto, para ponerle el suficiente interés por aprenderlo, como no me llame, ni lo miro, jaja! Pero supongo que nos pasa a todos, que tiene que gustarnos lo suficiente. Si no nos gusta y le podemos encargar a alguien la tarea, fenomenal, claro que sí, un beso!

      Eliminar
  4. Un post muy interesante!! Me hubiera venido genial este post hace unos meses. Yo tuve que tirar de mi hermano informático para lo que no conseguía hacer. Gracias por compartir con nosotros tu trabajo. Un beso guapísima!!

    ResponderEliminar
    Respuestas
    1. Tener amigos o familia que nos lo puedan resolver, es fenomenal. Yo también tiro de mi hermano para todo lo que tiene que ver con Wordpress, jaja! un beso!

      Eliminar
  5. Mira por donde me viene genial este post, hace tiempo cambié la mía aunque en blogger, y poco a poco creo que me estoy haciendo una experta en css ;) me lo guardaré para cuando me ponga a ello

    ResponderEliminar
  6. Mira si estoy dormida y despistada en verano que estaba convencidísima que el post era para wordpress (será porque no lo pone clarito en el título) habrás pensado por mi anterior comentario que no estoy muy normal jejeje, me guardo el código porque lo aplicaré seguro ;)

    ResponderEliminar
    Respuestas
    1. Jjajaa, Wordpress ya llegará con el tiempo! desde luego, cuando me haga con él no me lo voy a creer, jejeje.. un beso Mónica!

      Eliminar
  7. Yo que trato varios temas en mi blog creo que me sería de gran ayuda clasificarlas en páginas como tú bien explicas. La verdad es que me encantan tus post y además mi blog esta en blogger con lo cual me viene perfecto así que creo que me voy a tomar un descanso en el mes de agosto para darle un aire nuevo con ayuda de tus post pero me surge una duda. Puedo ir realizando estos cambios y que no se vyan aplicando directamente en el blog??? Es decir ir haciendo los y el día de la vuelta pues hacer visibles estos cambios. No se si será posible pero como tú eres toda una experta pues te lo pregunto jijiji mil gracias por tus Post

    ResponderEliminar
    Respuestas
    1. Hola Ainoa, para hacer eso, yo lo que te recomendaría es que crearás un nuevo blog, lo pusieras en privado y subieras una copia de seguridad de tu blog actual. Entonces, podrías hacerle todos los cambios tranquilamente y una vez estuvieras contenta, bajarte esa plantilla y ponerla en tu blog público. Consultame si tienes dudas. Un beso!

      Eliminar
  8. Es una buena opción la que muestras. Yo suelo crear mi menú en html. Creo una tabla y luego le doy estilos en css. Es algo más complicado si no se controla la programación en código pero a mi me gusta más. Siempre que puedo intento hacer las cosas por mi misma y no tirar de gadget. De esta forma no pierdo los conocimientos de programación y voy practicando. ¡Un besito!

    ResponderEliminar
    Respuestas
    1. Claro Priscila, así es como están creados los otros dos menús que muestro en mi comunidad privada. Este es más sencillo, para quien no se quiera complicar y los otros dos, son un poco más entretenidos pero para mi gusto, más completos ;) un beso!

      Eliminar
  9. Hasta hace poco menos de un año yo también tenía un menúcomo el que enseñas a poner en el tutorial, de estos que se encuentran entre la cabecera y el contenido pero, después de mucho pensarlo (porque he de confesar que me gustaba cómo quedaba ahí, ... decidí saltar a un formato más parecido al que tienes ahora y es que, ¡ay que práctico es que se quede ahí fijo para cuando vas navegando por el blog! ;)
    Un beso :)

    ResponderEliminar
  10. La verdad es que sí Vanessa, queda práctico y más vistoso, pero adaptarlo a vista móvil también es más complicado, jeje. Pero bueno, si sabes hacerlo, merece la pena. Un beso!

    ResponderEliminar
  11. Siempre me acerco a leer tu Post con una mezcla de expectación y miedo porque a pesar de la claro de tus explicaciones siempre tengo que recurrir a una amiga para que me ayude en estos menesteres. Yo reconozco que tengo mi sidebar algo caótico pero es que aún no tengo claras las categorías que voy a dejar a pesar de que mi blog tiene más de un año antes de cambiarlo. Bss
    Walkingtopennylane

    ResponderEliminar
    Respuestas
    1. No te preocupes Penny, ve pasándoselo a tu amiga y que te lo haga poquito a poco. Ahora que llega el verano, es un buen momento para darle un lavado de cara y aparecer con una imagen renovada y fresca, para darle fuerza a la próxima temporada. Un beso!

      Eliminar
  12. Raquel excelente post, estos tutoriales me viene de lujo y más aún si están tan bien explicados como los tuyos, necesito dar unos retoques al blog y aki encuentro detalles que si o si requiero ^.^ Gracias

    ResponderEliminar
    Respuestas
    1. Me alegro mucho de que te vengan bien Karina, esa es la intención. Si cuando lo personalices me quieres dar un toque para verlo, estaré encantada. Me hace mucha ilusión ver como sois capaces de dar un aspecto más atractivo a vuestros blogs con mis tutoriales. Un besote!

      Eliminar
  13. Te juro que llevo esperando por este tutorial un montón!! He estado cambiandole cosas al blog y esto se me resiste; lo tengo hecho una piltrafilla jajaja menos mal ahora ya puedo ponerme a ello contu tutorial, enserio con tu ayuda haces que poner bonito nuestro blog sea super gratificante! Menis mal que soy de la comunidad y ya mañana mismo mr pongo con ello! Mil gracias guapa y como siempre todo impecable!😍💋

    ResponderEliminar
    Respuestas
    1. Pues para la próxima semana, te contaré cómo adaptarlo a vista móvil, que esa va a ser la guinda que te faltaba para tener un blog sensacional. Te avisaré, porque sé que lo estás esperando. Un beso Catalina!

      Eliminar
  14. Holaaaaa, me ha encantado tu blog,e fasssCINAAAAAA pero tengo una duda q es eso del css?! Yo he creado mi blog solita y le he hecho modificaciones y pars mi obtener mi blog bonito bonito ha sido muy complicado, y hay cosas q me son difíciles de entender y mr costo un error fatal entender que el html es de cuidado...
    Así q me podrías explicar q es css!? Ya me he SUSCRITO y he descargado el e book!! Interesante saludos!!

    ResponderEliminar
  15. Holaaaaa, me ha encantado tu blog,e fasssCINAAAAAA pero tengo una duda q es eso del css?! Yo he creado mi blog solita y le he hecho modificaciones y pars mi obtener mi blog bonito bonito ha sido muy complicado, y hay cosas q me son difíciles de entender y mr costo un error fatal entender que el html es de cuidado...
    Así q me podrías explicar q es css!? Ya me he SUSCRITO y he descargado el e book!! Interesante saludos!!

    ResponderEliminar
    Respuestas
    1. Hola Isabel, bienvenida a la comunidad me alegro que te haya gustado el blog y que te resulte útil la guía gratuita para usar imágenes en la red. Te explico, el html es código que creas para un fin determinado, como puede ser por ejemplo un botón, una caja para enmarcar textos, un buscador etc... y el css es la parte estética de ese elemento que has creado. Cuando tu creas un elemento, normalmente necesitas darle chapa y pintura jeje, ponerlo bonito y esa es la parte que corresponde al CSS, por ejemplo, darle un color o un fondo determinado, hacer que las letras se vean en mayúscula o con un tipo de fuente o tamaño concreto. En definitiva, darle un estética al elemento que creas con HTML. Espero que esta explicación te sirva para entender mejor lo que es el CSS. De todas maneras en el indice del blog, en el apartado Blogging, tienes todos los tutoriales que he creado en los que puedes incluir código HTML y personalizarlos a tu gusto con CSS. Puede que así como te lo cuento, te parezca un poco complicado, pero ya verás que siguiendo los tutoriales te va a resultar muy sencillo y te vas a hacer una experta. Un beso!

      Eliminar

demo