Cómo colocar un Menú con imágenes en la Barra Lateral y reducir el espacio entre gadgets.

MENU-SIDEBAR-BARRA-BLOGGING

La organización del contenido de nuestro blog es sumamente importante, y claro, la forma en cómo presentamos esa organización. En esta oportunidad me centraré en cómo colocar un Menú con imágenes en la barra lateral del blog de la forma más sencilla que he podido encontrar y que comparto contigo a continuación:

Pasos previos:
  1. Tener organizadas tus entradas por etiquetas, esto es fundamental, hagas o no un menú, tu contenido debe estar organizado, por muchas razones que seguro ya conoces. 
  2. Seleccionar las etiquetas de tu blog que conformarán el menú de la barra lateral, aquí te sugiero que priorices ya que tienes tres opciones de menú para acceder a tu contenido: la barra superior del blog, el menú horizontal (bajo la cabecera) y el menú vertical (en barra lateral)
  3. Diseña las imágenes que servirán de botones de acceso del menú, puedes utilizar para ello programas como Picmonkey o Canva, dirigidos a no diseñadores, muy sencillos y cada uno con una galería de imágenes y plantillas muy variadas. Si aún no has diseñado con Canva, te dejo aquí un tutorial para que veas lo fácil que es. Para saber cuál es el ancho que tiene la barra lateral de tu blog, solo vas a Panel de Blogger→Diseño→Diseñador de plantillas→Ajustar Ancho... y aparecerán el ancho en píxeles de tu blog y de la barra lateral, ten en cuenta esa medida a la hora de diseñar, pero no te preocupes si has conseguido descargar imágenes (botones) con una medida mayor, ya que solo se ajusta al momento de insertarlas. Eso lo veremos más adelante.

Nota: Cuando diseñes o si descargas la imágenes para los botones cuida que la extensión de los archivos sea .png. 

Te dejo algunas ideas de botones para menú que encontré paseando por la web:

MENU-SIDEBAR-IDEAS-MAMAYNENE

Colocando el Menú en la Barra Lateral

Obtén la dirección URL de cada una de las etiquetas que conformarán el menú. Sólo haz click en una etiqueta, selecciona y copia la dirección que aparece en la barra de direcciones de tu navegador. Tenlas a la mano en un archivo de notas.


Insertar un gadget de imagen por cada botón o etiqueta que conformará el menú. Ve al Panel de Blogger→Diseño→Agregar un gadget→Imagen y carga la imagen que haz diseñado para tu primer botón del menú.


  1. Donde dice "título" coloca este código <h2></h2> (te permitirá engañar a blogger y cargar sólo tu imagen sin ningún texto en ese campo). Esto aplica para cualquier imagen que desees instalar sin títulos. 
  2. En  el campo "vínculo" coloca la dirección URL de la etiqueta para tu primer botón.
  3. Selecciona el archivo de imagen para el botón de tu menú, (*) Si la imagen es más grande, activa la opción Reducir hasta ajustar.
  4. Guarda la imagen.
  5. Repite los pasos del 1 al 4 para cada botón del menú.


Y ya tienes tu menú en la barra lateral del blog, los botones funcionan, redirigen al contenido de cada etiqueta, pero no se ve muy bien ya que hay mucho espacio entre los gadgets (entre botón y botón) ¿cierto? No te preocupes, eso lo vamos a modificar...

MENU-SIDEBAR-BARRA-LATERAL-BLOGGING

Reducir el espacio entre gadgets

Identificamos los nombres de nuestros gadgets, en este caso nuestros botones del menú. Vamos con el primer gadget: al Panel de Blogger → Diseño y colocamos el cursor sobre "Editar" ubicado en la esquina inferior derecha de cada gadget, verás que en la parte inferior del panel aparece una dirección, espera unos segundos que cargue la dirección completa.


El nombre del gadget de imagen está dentro de esa dirección, como se trata de imágenes el nombre empieza con Image seguido de un número, mi primer botón tiene el nombre Image1.



Mi segundo botón tiene el nombre Image2.


Ojo, que esto es una coincidencia porque estoy trabajando en mi blog de pruebas y está casi virgen jejeje... dependiendo del número de gadgets de imagen que tengas y cómo los hayas ubicado encontrarás pro ejemplo que tu primer botón es Image7 y el segundo Image3, así que observa con atención.

La idea es la siguiente: reduciremos el espacio entre gadgets acercando el primero al segundo, y repetiremos la operación para cada gadget, es decir, el que se quiere juntar al siguiente.

Vamos a Panel de Blogger→Diseño→Diseñador de Plantillas→Opciones Avanzadas→Añadir CSS y ahí copiamos el siguiente código 

#Image1{margin-bottom: -50px !important;}

El valor -50px es el nuevo espacio que asignaré entre gadgets, puedes variarlo según tu gusto, ten en cuenta que son valores negativos entonces un -5 es un gran espacio y un -50 es más pequeño.

Así quedaría el primer gadget (botón DIY):

 

Y aplicando el mismo código con el respectivo nombre del gadget para los primeros cuatro gadgets de mi menú, queda de esta forma:

REDUCIR-ESPACIO-ENTRE-GADGETS-BLOG-MAMAYNENE


Como ves, el último código corresponde al gadget Image4 (Recetas con ♥) que se acerca el gadget siguiente (Retos). Para finalizar, hacemos click en "Aplicar al blog" y listo.

Espero que te haya gustado este tutorial y te sea de mucha utilidad.  Hasta pronto.


Mamá&nené

Un espacio para padres que crían y educan con amor.
En cuanto a crianza no hay manuales, pero sí un sentimiento que compartimos los padres y es el amor por nuestros hijos, el amor que nos motiva a ser mejores y que nos mueve a buscar por todos los medios su seguridad, bienestar y felicidad. 
En Mamá&nené fomentamos la crianza respetuosa y toda forma de expresión de amor hacia nuestros hijos. Aquí encontrarás información sobre maternidad y diferentes recursos educativos para acompañar a tu pequeñ@ en un proceso de aprendizaje divertido. Creemos que la mejor forma de aprender es de la mano de las personas que nos aman. ¡Bienvenid@ a Mamá&nené!

24 comentarios:

  1. Karina, muchas gracias por este tutorial. Me parece utilísimo y está muy bien explicado. Hace tiempo que andaba pensando en hacer cambios en el blig, pero estoy un poco pez en esto. Con post como estos aprendo un montón y me van a servir de mucho. Gracias otra vez!! Besos

    ResponderEliminar
    Respuestas
    1. Me da mucha alegría que lo encuentres útil y entendible, esto último si es un reto para mí pues tiendo a divargar jejeje...

      Eliminar
  2. Jooo! Que tutorial tan completo, me ha gustado mucho :D

    ResponderEliminar
    Respuestas
    1. Pues viniendo de ti Wendy es un super halago. He aprendido un montón como autodidacta y gracias a la asesoría y generosidad de otros blogger como tú. Un beso, y nos vemos prontito en la Escuelita Virtual.

      Eliminar
  3. ¡Cuántos deberes tengo!. Genial tu post, me lo releeré en unas semanicas cuando termine con lo que estoy haciendo ahora (SEO y 31 DBBB) y lo que me queda por aprender ;)

    ResponderEliminar
    Respuestas
    1. Ufff, sí, el año pasado para muchas fue de lanzamiento y este es de posicionamiento de los blogs, así que todas las herramientas y recursos son bienvenidos. Yo también me he apuntado a varios, y no sé como pero tengo que obtener más tiempo para aprovechar las oportunidades que se están presentando. Un beso, y suerte!!

      Eliminar
  4. me viene muy bien! es una tarea que tengo pendiente y que esta semana hago si o si , me encantan la primera etiqueta pero no con florecitas... a ver que se me ocurre!
    besotes
    Las cosinas de Aisha

    ResponderEliminar
    Respuestas
    1. Si, a mí tampoco me gustan muchos adornos ¿has visto como es mi menú? ya es cuestión que le imprimas tu personalidad en cada rinconcito de tu blog para que ten sientas contenta con los resultados. Me alegra que te haya gustado el tutorial, un beso.

      Eliminar
  5. Jo, esto es lo que llevo buscando desde hace días!!!
    Solo una pregunta: en WordPress se hace igual?
    Gracias por el tuto ;)

    lamamadealvaro.WordPress.com

    ResponderEliminar
    Respuestas
    1. Pues te diré, vi tu comentario en mi correo y me dejaste el gusanillo de la curiosidad, así que en la tarde me he abierto una cuenta en WordPress para probar y he encontrado que es totalmente diferente, no es difícil pero este tutorial podría aplicarse sólo como para tener la idea o criterio a la hora de crear y colocar el menú, pero los nombres de los accesos y el paso a paso son diferentes.
      Gracias por pasar por acá. Un besote.

      Eliminar
  6. Muy bueno, yo puse el menú con imágenes gracias a la escuelita virtual de Wendy pero me quedaba muy separado así que me viene de perlas tu tuto. Acabo de probar a reducir el espacio pero el primero de los gadgets se me sigue quedando separado, lo he seguido todo al pie de la letra y lo he repetido a ver si es que me había equivocado en algo, ¿sabes por qué puede ser y cómo lo puedo arreglar guapa? Muchas gracias y un besito!!

    ResponderEliminar
    Respuestas
    1. Arreglado!! He cogido también el código de texto que tenía justo arriba de las imágenes y lo he ajustado también, ahora sí me ha salido como yo quería ;-) Muchas gracias guapa!!

      Eliminar
    2. Ya lo he visto!!! felicitaciones, me encanta como quedó, me da la impresión que así juntitos incluso resaltan la paleta de colores de tu blog. Bravo!!

      Eliminar
  7. Bueno, esto hay que ponerlo en práctica YAAAA!!!!

    Besos

    ResponderEliminar
    Respuestas
    1. Genial !! Un beso y muchas gracias por pasar por acá.

      Eliminar
  8. Me viene muy bien este tutorial, guapa! Gracias, un besote!

    ResponderEliminar
  9. Muchas gracias! Has solucionado un problema bastante complicado para nosotros. Te lo agradecemos de corazón!!!

    Saludos!

    ResponderEliminar
    Respuestas
    1. Gracias a ti por pasar por acá, un abrazo!!

      Eliminar
  10. Me encanta lo publicado!!! Me es de much
    a utilidad para enriquecer mi blog. Gracias!

    ResponderEliminar
  11. Muchas gracias! El tutorial me fue de gran ayuda y acabo de aplicarlo a mi blog!

    ResponderEliminar

Instagram