20/3/13

Cómo reducir el espacio entre los gadgets

Estas dos últimas semanas tres personas me han preguntado la misma cosa, y me ha hecho gracia, porque hasta ahora nadie me la había preguntado... Cómo reducir el espacio que queda entre los gadgets (sobre todo al poner el título a algo).

Yo misma no lo he hecho, porque ya se sabe que en casa del herrero... pero sí que lo he hecho por ejemplo en el blog Oh pero esto se come, ya que no sé por qué, en unos diseños (supongo que por el modelo de títulos) se ve incluso más que en otros. 

Por si alguien no entiende bien de lo que hablo, me refiero a esto. Fijaos como en el ejemplo de arriba hay más espacio entre los títulos y sus respectivos gadgets:



Entonces, no es nada difícil, pero vais a tener que poner antención

Eso sí, antes de nada, tenéis que aprender dónde mirar el nombre de vuestros gadgets (ID se llama)

Es muy fácil.

Cuando estamos en Diseño, tenemos que pasar por encima de donde dice Editar del gadget en sí. 

Voy a hacerlo yo con uno. Abajo a la izquierda saldrá una línea informativa y se cargará en dos pasos. Pimero un poco, y luego el resto. Hay que dejar que se cargue por completo o no lo veremos.

Este es el primer pasito:


Y este el segundo:


Fijaos que se llama Image5:


Si es un gadget Imagen, como en este caso, siempre será Image y un número. 

Y ahora, teniendo esto claro, empezamos.

Como reducir el espacio entre los gadgets


Paso 1. Pensar qué gadgets queremos juntar.

Es decir, esto que vamos a ver se hace uno a uno, juntando un gadget al gadget de justo debajo. Va a ser un código detrás de otro.

Digamos que el código que ponemos arriba del todo es Image 5, bueno, pues nos juntará ese al siguiente. Y así.

Entonces esta es mi columna de gadgets (para el tutorial, no es la de mi blog)

Pero no quiero juntar todo a todo o quedará un batiburrillo.

Quiero:

a) Juntar Buscar a su cuadrito de búsqueda.
b) Dejar espacio entre el cuadrito y Suscríbete.
c) Juntar Suscríbete a su cuadrito para poner el email.

Paso 2. Vamos a añadir CSS

Y el código que necesitamos será:

#Image5{
margin-bottom: -20px !important;
}


Pensad que donde dice Image5 tendrá que ir cada vez el código del gadget de arriba, es decir, el que queremos juntar al siguiente.

Y que el -20 lo podemos cambiar por lo que quieras. Son los píxeles que de espacio que dejamos.

Como es un número negativo, un -5 dejará bastante espacio y un -50 lo juntará muchísimo.

De todos modos -20 es una medida que más o menos os quedará bien.

Entonces, con ese código he juntado mi primer gadget (Image5 – Imagen Buscar) al siguiente (su cuadrito de búsqueda)

Doy un par de intros, y pongo:

#Image3{
margin-bottom: -20px !important;
}


¿Por qué? Porque Image3 es el gadget Imagen con la imagen de Sucríbete, y ya hemos visto antes en el paso  c)  que no quería espacio entre el cuadrito de búsqueda y el siguiente…

Y así uno a uno.

Yo, poniendo esos dos códigos en mi cajita de Añadir CSS, consigo esto:

Además esto, por supuesto, lo podéis hacer con todos los gadgets que queráis, y no sólo de la columna. 

Las que estáis haciendo el Curso Dos, si veis que queréis ajustar el hueco que os queda encima de vuestra barra de pestañas personalizada, podéis usar este sistema para reducirlo o agrandarlo.

Yo lo hice así en este blog de prueba, que me quedaba mucho hueco entre la barrita de páginas y la presentación de fotos con diapositivas.

Por supuesto también podría haberlo usado para ajustar el espacio entre la cabecera y las diapositivas, pero me parecía que así quedaba bien.


En este caso, los dos (tanto la presentación como la barrita), ya sabéis que son gadgets HTML, así que su ID será HTML y un número...

Siempre el ID será aquello de lo que sea el gadget y luego su número correspondiente :)

¡Espero que os sea útil!

Besos,






P.D. Y hablando de esto, alguna quiere aprender a poner en su blog una barra de páginas/pestañas personalizada o una presentación de fotos (es estupendo para blogs de repostería, manualidades, moda... y en definitiva de cosas con fotos bonitas), puede comprar el Curso Dos pinchando aquí.

En él vais a aprender muchiiiiiiiiiiiiiiiiiiisimas cosas. Pensad que esas dos cosas son sólo 18 páginas... ¡de 221!

Creedme, ese curso es una mina (y esto no lo digo yo, sino que ya me lo ha dicho la gente que lo ha comprado). Por supuesto, es tan fácil de entender y ameno como todos mis cursos y tutoriales, y a un precio que da la risa :)

P.D #2. Yo de vosotras no me perdería por nada del mundo el post de mañana... ;)

Únete a mi newsletter para recibir cada semana un resumen con trucos y recursos

72 comentarios

  1. Evidentemente, esto no sabía hacerlo... Creo que a mi blog no le hace falta, pero nunca está de más saber hacerlo por si acaso!

    Y bueno, yo el post de mañana no me lo pierdo! Si los leo todos, ya lo sabes!

    Un besoooo

    ResponderEliminar
  2. Gracias, gracias y gracias! Queda clarisimo :)

    Me pongo ahora mismo a hacerlo :)

    Un besote muy muy gordo!!

    ResponderEliminar
  3. Qué bien me viene esto! no había caído en que quedaban bastante separadas. Lo dejo pendiente y lo haré en cuanto tenga un ratito.

    Y sí, para quien no se acabe de animar, el curso 2 está muy muy bien. Yo soy bastante autodidacta y me lo estuve pensando si debía o no comprarlo, si me iría bien, si me aportaría lo que necesito... y ahora, después de haberlo comprado y aplicado, estoy muy contenta con el resultado de mi blog. Incluso me han enviado varios mails felicitándome por lo bonito que está mi blog! y he de decir que yo estaba muy contenta con como estaba antes y no creía que necesitase ningún cambio significativo. Pero creo que ahora está más profesional.

    También he de decir una cosa. Blanca nos da las herramientas y nosotros tenemos que poner nuestro estilo y gusto. Por tanto, aunque 1000 personas tuvieran este curso (que ojalá por Blanca!), habría 1000 blogs totalmente diferentes (salvo que hagas el curso mientras miras otro blog para hacerlo lo más parecido posible! cosa que no está bien).

    En fin, que me parece un buen curso, de calidad precio insuperable y que te da plena libertad para hacer lo que quieras. Es ideal para gente como yo, que quiere mejorar su blog pero teniendo el control sobre él, sin que alguien te lo modifique y luego tú no sepas ni que ha hecho ni como cambiarlo si te cansas.

    Besos
    Bea de Bocados Divinos

    ResponderEliminar
  4. Post muy interesante Blanca!

    Un beso!

    http://marotopia.blogspot.com.es/

    ResponderEliminar
  5. madre miaaaaa!! y yo que estuve intentando averiguar como hacer esto durante meses!!! Y tu con un par de pasos lo explicas a la perfección! Eres lo más!!

    Un besote

    ResponderEliminar
  6. Pues como yo tengo el blog tan precioso gracias a tí, no tengo que cambiar los "huequecitos" pero nunca está de más saber más cosas. Mañana aquí estaré.
    MUAKSSSSSSSSSSSSSSSS

    ResponderEliminar
  7. Qué útil! Muchas gracias de nuevo :)

    ResponderEliminar
  8. Que guay!! Yo ya lo he hecho!!!
    Gracias Blanca!!!
    Mua

    ResponderEliminar
  9. No me pierdo por nada del mundo el post de mañana, eres un crack!!

    Pues mira yo siempre me lo había preguntado, pero pensé que era cosa de las imágenes y que no se podía cambiar...

    Ya cambie un par de ellos, creo que se ve mejor así...ains que haríamos sin ti!!!

    ResponderEliminar
  10. Pues iba a ser mi próxima pregunta (jeje), junto a cómo hacer que ciertos gadgets no me pidan un título (como el buscador y el de entradas más vistas)... o que pueda esquivarlo, que le he tenido que poner un punto y aún me queda más separado de la imagen que le hace de título... argh!!

    ResponderEliminar
  11. Muy práctico y muy bien explicadito...como siempre. Tienes la virtud de convertir en fácil lo difícil...Créeme, para muchas esto es bastante difícil!! ;)

    Por cierto, sabes a quién tengo en mi tablero de Recursos para el Blog, no?

    Besines guapa!

    ResponderEliminar
  12. Siii,me lo había preguntado muchas veces, pero me había resignado con un simple..."será así" (encongiéndome de hombros y poniendo cara de haba). Qué bien, me pongo a hacerlo ahora mismo, a ver si no me lío.

    Besitos y gracias!
    Ángela

    ResponderEliminar
  13. Muchas gracias, Blanca!!! Me encanta el post de hoy porque siempre son detalles que hacen mejorar mucho la imagen de nuestro blog!! Eres genial!
    Un beso

    ResponderEliminar
  14. Muchas gracias, Blanca!! Me encanta el post de hoy porque siempre nos das unos truquillos para hacer que nuestro blog esté cada vez más chulo!!! El de hoy ya lo he puesto en práctica.
    Gracias, eres genial!!
    Un beso

    ResponderEliminar
  15. Upss, Blanca, creo que es la primera vez que explicas algo y no lo pillo... Pero probablemente se deba a que ha llegado la primavera a Madrid y no puedo concentrarme. Creo que mañana lo intentaré de nuevo... ¿La cajita CSS es la que está en PLANTILLA - PERSONALIZAR - AVANZADO - AÑADIR CSS?
    Y ya que estoy, otra preguntita: yo hice el curso uno (en cuanto pueda me meto con el dos pero de momento estoy demasiado liada... ainsss). Aprendí genial a cambiar el fondo del blog. Y lo cambié de maravilla. Pero ahora quiero cambiarlo para ponerlo de primavera y lo que me pasa es que cuando subo un documento png o jpg queda siempre una rallita de modo que se ve el fondo... No sé si me explico... Si no te mando una fotito. ¿Cómo hago para que no suceda esto?
    Un millón de gracias,
    Chelo

    ResponderEliminar
  16. Que fenomenal Blanca!!!! Lo queno se es como es posible que no te quedes sin ideas porque sabes más de lo que me podía imaginar.... Eres una fenómena!!! Mil thanks!!!!Un besín

    ResponderEliminar
  17. voy a escribir aquí que sé que los comentarios también hacen ilusión ;)

    gracias por el tutorial, siempre me lo había preguntando y no sabía que podía 'arreglarse'

    así que muchas gracias!!!

    ResponderEliminar
  18. madre mia que de trabajo atrasado tengo! Blanca, me pongo las pilas ya!
    bss

    ResponderEliminar
  19. Jo, yo lo estoy intentando hacer pero no se me carga la información completa cuando paso por encima del "editar" del gadget. Por qué será?

    ResponderEliminar
  20. ¡Waaaaw! ¡Genial el tutorial! ¡Súper útil y genial explicado, qué haríamos sin tu blog, sin tus post y sin tus cursos! Una cosita, entiendo que sólo vale para acercar una imagen a su respectivo gadget, ¿no?

    Carmen de Veranos de Limón

    ResponderEliminar
  21. Hecho! Yo creo que fui una de las preguntonas, jajajajaja. Parece una tontería pero cuando la verdad es que en mi blog a mi me parece que llamaba la atención bastante. Ahora me quedo mucho más a gusto :)), por supuesto, ya lo he cambiado todo.
    Sin este post me resultaría imposible acceder a estas cuestiones de HTML o CSS que no sabía ni lo que era hasta que hice el curso, salvo que seas informática o tu novio lo sea!! ;)) Bueno, ahora tampoco es que sepa lo que es, ni falta jajaja. Cor tus corta-pegas me es suficiente.

    Graciaaaaaaaas una vez más!!!

    Besos.

    MD

    ResponderEliminar
  22. Siiiiiiiii Siiiiiiiiii Lo conseguí!!!!!!! Qué miedo tuve de perder toda la plantilla, jajaja

    Blanca, IDOLA!!!!

    bsss

    ResponderEliminar
  23. Gracias Blanca!! estoy deseando quitar los super-espacios de mi blog! pero nena, hoy estoy espesa... no lo consigo! joooo!

    ResponderEliminar
  24. Lo has explicado divinamente, Blanca; yo quería hacerlo y ya está hecho pero...a mí en Safari al pasar el ratón no me sale la id del gadget, el otro día leí un comentario de una chica que también tiene Mac así que para ella, decirle que fui a plantilla: editar html y busqué.
    Dice:



    Ahí vi que Image2 era la de "buscar" que era la que quería juntar con el buscador y así todas. Espero que le sea de utilidad. Besos.


    ResponderEliminar
  25. Blancaaaaaaaaaaa !! Que grande eres de verdad que si el otro dia estaba buscando sin fundamento como hacer ese tipo de cosas..las dejaremos para el finde que tengo un poco mas de tiempo libre !!! Por cierto siento no seguir la estela twiter de verdad que pienso mucho en ello pero ...He estado súper liada con lo de organizar el viaje a Londres y ahora tengo que ponerme de nuevo con el blog, se que es importante para mi pero ..no puedo. Lo dejare para mas adelante. Gracias por seguir ilustrandonos en nuestros caminos blogueros ..Un besete
    Mila

    ResponderEliminar
  26. ¡Hola guapa!
    Me he enganchado a tu blog...¡¡increible y super útil!!! Yo novata en todo esto intento aprender de ti. Tengo un blog de maternidad, con pocos seguidores todavía pero con mucha ilusión. Ojalá tenga suerte como tú. Gracias por compartir con nosotras todo lo que sabes. Eres un sol. Besos enormes.

    ResponderEliminar
  27. Muchas gracias Blanca, yo todavía no he llegado a eso en el libro, espero llegar enseguida. Por cierto, el libro es gordíiiiiiisimo, es más gordo que el de Cómo promocionar tu blog. Un besico.

    ResponderEliminar
  28. ¡Qué útil! De momento lo pineo, y ya lo pondré en práctica. ¡Muchas gracias!
    Besos.

    ResponderEliminar
  29. Ohh! Yo soy otra de las preguntonas!!
    Muchas gracias!! Tu buzón de peticiones funciona a las mil maravillas.
    Muakk

    ResponderEliminar
  30. Otro truquito genial Blanca!!! Me encanta, muchas gracias!!! la verdad es que le he dado un cambio al blog desde que aplico tus tutoriales, pero no consigo quitar el marquito blanco que aparece alrededor de mis fotos y la verdad que algunas veces afea bastante, como en la firma por ej. A ver si en alguna entrada das solucion a eso...
    un besote

    ResponderEliminar
  31. graciasss me ha sido de gran ayudaaa

    http://decorathe.blogspot.com.es/

    ResponderEliminar
  32. Uy, uy, uy.
    Este tuto me lo apunto desde ya, que lo necesito!
    A ver si este finde me pongo en plan, y lo pongo en práctica!
    Gracias!! :)

    Un besín!

    ResponderEliminar
  33. ¡Hecho! Jijijij. Toda la semana esperando tener un ratillo para hacerlo, jejeje.
    Ahora voy a por las flechis.
    Esa Blanca como mola, se merece una ola!!!

    ResponderEliminar
  34. Hola, no sé porque no conocía este blog!
    He añadido un par de cositas a mi blog.
    Muchisimas gracias!

    ResponderEliminar
  35. Hola!! pues a mi no me sale la ID de las imágenes... primer paso fail! que hago??
    Gracias!!

    Pequeña Lolailo

    ResponderEliminar
  36. Gracias Blanca!!! Acabo de resideñar mi blog y era el último detallito que me faltaba para mis títulos personalizados!

    ResponderEliminar
  37. Gracias Blanca! cuanto aprendemos contigo ^.^

    ResponderEliminar
  38. Muchísimas gracias Blanca, voy a aplicarlo en seguida... por cierto,. tu curso de promoción del blog me ha aclarado muchísimas cosas.. unas más dolorosas que otras, pero muchas! jajaa
    eres un sol
    muchísimas gracias, el dinero mejor invertido de mi vida.. (por delante del láser, eh??) jajaja
    que pases buen finde

    ResponderEliminar
  39. Hola!
    Acabo de llegar a tu blog porque justo tenía este problema y ya he podido solucionarlo :D

    Muchas gracias!

    Me quedo por aquí y así veo los demás consejos que das


    Un beso!

    ResponderEliminar
  40. Recordaba a ver visto este truquillo en tu blog ;)
    gracias voy a probarlo ahora

    ResponderEliminar
  41. ¡Ya lo hice hace tiempo y hoy he metido elementos nuevos y lo he vuelto a necesitar! GRACIAS por compartir con nosotras tu sabiduría. Un beso, preciosa.

    ResponderEliminar
  42. me ha resultado muy útil esta entrada, gracias :)

    ResponderEliminar
  43. Genial!!! Gracias mi blog esta quedando chulo y mucho gracias a ti!BSS

    ResponderEliminar
  44. ¡Gracias Blanca! Me fue muy útil este tutorial, ya lo apliqué a uno de mis blogs.

    Saludos.

    ResponderEliminar
  45. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  46. Gracias Blanca me ha sido muy útil el tutorial!

    ResponderEliminar
  47. Gracias por el tutorial Blanca me ha ido muy bien!

    ResponderEliminar
  48. Mil gracias, acabo de implementarlo en mi blog y resultó fabuloso!!!

    Un abrazo!

    ResponderEliminar
  49. Hola Blanca,

    cosa extraña, no me deja reducir el espacio. Es algo que ya habia intentado en otra ocasión, y hay algo que se me escapa que no me permite que se reduzca el espacio.

    Se te ocurre que puede ser?

    mi blog es http://futbolbarsayotrashistorias.blogspot.com/ por si te dice algo...

    saludos

    ResponderEliminar
  50. Perfectamente explicado. Me sirvió de mil maravillas. ¡Salute!

    ResponderEliminar
  51. Hola Blanca
    Como a mi no me va el CSS.. ¿cómo tendría que hacerlo?
    Gracias

    ResponderEliminar
  52. Hola!
    Llevo dos días de trabajo en el bloc. Me faltaría modificar la plantilla y la cabecera pero no encuentro la manera de hacerlo, ni la inspiración necesaria... y si, podría hacer el curso 1 y el 2 pero estoy demasiado liada (el blog lo uso para publicar material educativo).
    Bueno, que me lío! El caso es que ayer intenté modificar el estilo de fecha, poniéndola en un circulito y no hubo manera. Hoy, intentaba modificar la separación entre los gadgets y tampoco... total que me mirado los comentarios y he visto que una compañera hacía referencia a los Mac, que es el ordenador que uso, por lo que me ha dado por rebuscar en internet y... ¡he encontrado la solución a todos mis males! No se trata del sistema operativo sino ¡DEL NAVEGADOR! Yo uso Chrome y, por lo visto, no es de los mejores respecto al CSS, sin embargo, Safari si. He probado de hacer el cambio con Safari y ¡conseguido!. En fin, sólo quería comentarlo por si a alguien le pasa lo mismo.
    Un abrazo y feliz domingo! :-)

    ResponderEliminar
  53. wow!! genial...me quedaron los botones justo donde los queria!! pegaditos debajo de la cabecera...gracias blanca!!!

    ResponderEliminar
  54. Cómo te estarás dando cuenta estoy aprendiendo muchísimo con tu blog, y eso que no te comento en todos los tutoriales que he aplicado!
    Éste me ha sido especialmente útil para eliminar el espacio tan feo que me quedaba entre el gadget imagen y el texto en los que me presento. Así que mil gracias!!

    ResponderEliminar
  55. Querida Blanca,

    Me encanta haber encontrado este tema tan interesante y necesario para poder perfilar un blog. El problema es que no me funciona, lo llevo probando todo el día, tal y como dices y no hay manera. No hay resultado, es extrañísimo, que puedo estar haciendo mal??
    Besos
    Milady's pretty tables

    ResponderEliminar
  56. Hola antes que nada gracias soy nueva en esto de los blog y estaba empezando a desesperarme por no saber que hacer para que mi blog se viera bonito pero desde que encontré tu blog las cosas son mas fáciles muchas gracias :)

    ResponderEliminar
  57. FELICIDADES, ERES MI WONDERWOMAN DE LOS BLOGS..... Gracias totales, as salvado mi blog....

    ResponderEliminar
  58. muchas gracias!! hacia tiempo quería quitar esos espaciados de mis blogs! :D

    ResponderEliminar
  59. Muchiiiiiiisimas gracias!!!!! que bonito ha quedado jooooo si vivieramos cerca iba te daba un pedazo de abrazooooooo...
    Buen fin de semana, besos

    ResponderEliminar
  60. Acabo de probarlo... es genial!!
    Muchas gracias! Un abrazo

    ResponderEliminar
  61. Hola, mira despues de muchos años de tener blog se me ha dado por cambiar la plantilla, y en la cabecera hay un gadget de reconocimiento, me hace un lio barbaro pero no lo puedo sacar.
    Tu que eres tan gentil, me puedes decir que hago?
    Mi blog es lasrevelacionesdeltarot.blogstpot.com
    Muchisimas Gracias

    ResponderEliminar
  62. Buenísimo!! Muchas gracias por la ayuda :)

    ResponderEliminar
  63. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. AH google no me quiere! ^
      Muy facil de hacer, gracias a tu blog he dejado el mio hermoso !!
      Mi Blog: http://mushroomrain.blogspot.com/

      Gracias por compartir tus conocimientos de manera facil y bonita
      un saludo desde Colombia!

      Eliminar
  64. Hola Blanca,

    a mi no se me reduce el espacio entre gadgets, es más me aparece el código en la portada del Blog :O

    ResponderEliminar
  65. pues gracias por todos tus aportes es bueno consguir esta info... si uedes ayudarme? justo esto no puedo modificarlo quiero llorar!!! estoy empezando y honestamente la mayoria de las cosas aqui logrdas han sido gracias a tu blogg te ejo mi blogg para que veas que no puedo juntar los gadgets del lado izquierdo quedan muy separados y eh intentado esto ya mil veces!!! espero puedas ayudarm mil gracias por todo lo demas

    ResponderEliminar
  66. Hola Blanca, yo quiero introducir imágenes en las páginas de blogger, en las lista horizontal que hay bajo la cabecera del blog, sólo me deja introducir una imagen, y yo quiero introducir 4 imágenes en horizontal bajo la cabecera.
    El gadget multicolumnas, si pongo gadget páginas, me sale la lista en horizontal, pero no me deja introducir las imágenes, y si pongo imágenes sólo me deja meter una sola, y son 4 las que quiero meter y en horizontal. Espero puedas ayudarme, muchas gracias

    ResponderEliminar
  67. Algunos usan chatbots, WhatsApp bots, formularios de contacto desde el sitio web, agendamiento electrónico y por supuesto agendamiento mediante marcaciones a la línea telefónica.
    WhatsApp bots

    ResponderEliminar

© Personalización de Blogs. Diseño: Eve y Blanca.