Tutoriales fáciles para blogger: recuadro fotos, centrar títulos y cambiar colores

2 abr. 2013


Hola hola!! Volvemos a la vida normal, o casi normal. Para mi esta será semana rara... trabajo tres días... además por la mañana. Así que se me hará raro (pero podré disfrutar de la maravillosa siesta, cosa que no puedo hacer el resto de días porque trabajo por las tardes). 


Después de esta explicación laboral que no viene a cuento, vamos a lo que nos interesa. Comenzamos la semana de entradas, con tres tutoriales para blog. De hecho, son tres de las preguntas que más me hacéis por e-mail. Así que voy a resolveros todas vuestras dudas. Más vale que estaba de vacaciones... porque os estoy aburriendo de tantas entradas: calendarios, diario de las buenas noticias, publicidad... Vamos que estamos que lo tiramos.

Sé que hoy tocaba colaboración, pero quería terminar bien la entrada, es laboriosa y quería quedara bien bien bien, y la he pasado al jueves (un cambio pequeñín). 

Ya sé que esta entrada no va a ser útil para todos, ya lo siento, pero intento responder a vuestras peticiones de la mejor manera posible. Hoy ganan unos...otro día ganarán otros. Como vais a ver los tutoriales son muy sencillos, no se tarda más de 5 minutos en hacer cada uno. Pero ya sabéis que si tenéis dudas... yo estoy encantada de responderlas!!

Quitar la sombra o recuadro que sale en las fotos de blogger:

Si no he enviado 30 emails respondiendo a esto, no he enviado ninguno. Así que como es una duda bastante común, os la voy a resolver de una vez por todas. Vais a ver qué sencillico, es. También podéis ver otro tutorial del mismo estilo en el blog de Las Creaciones de Bea y Natalia (no dejéis de visitarlas porque tienen un montón de tutoriales para blogger).

Aquí veis un blog de prueba en el que las fotos o imágenes salen con un recuadrito gris y sombras. Este efecto aparece tanto en la imagen de la entrada como en las imágenes que coloquemos en las columnas. Si nos gusta (a mi no mucho) lo dejamos, si no nos gusta...¡¡acabamos con él!!


Seguid el paso a paso:
  • Pinchamos en plantilla
  • Personalizar
  • Avanzado: aquí buscamos el apartado en el que pone imágenes.
    • Nos tenemos que asegurar de que el primer color (color de fondo) y el segundo (color del borde) estén en transparente.



Cuando lo hayamos hecho, pinchamos en Aplicar al blog.
  • Volvemos a blogger.
  • Pinchamos en plantilla
  • Editar HTML
  • Activamos el cuadrito que pone expandir artilugios.
  • Pulsamos F3 para que nos salga el buscador
  • Pegamos lo siguiente en el buscador: .post-body img
  • Nos saldrá algo parecido a esto:


.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,


.BlogList .item-thumbnail img {

  padding: $(image.border.small.size);

  background: $(image.background.color);
  border: 1px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);


Nos vamos a centrar en la parte coloreada de morado. Y lo que vamos a hacer es tan sencillo como cambiar cada uno de los números delante de px por un cero, así (recordad que esto lo tenéis que hacer en vuestra plantilla de HTML):

 -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
  box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);

De esta manera quitamos la sombra de la foto, pero no eliminamos el efecto, por si acaso algún día nos apetece volver a recuperarlo. Si es así, solo tendríamos que volver a escribir los mismo números.

Antes de guardar, pulsad en vista previa, para asegurarnos de que el borde ha desaparecido y está todo correcto.
Si está todo bien, pinchamos en guardar, y listo.



Centrar los títulos de los posts:

Otra duda recurrente. ¿Cómo centramos los títulos de los posts? Pues misterio resuelto:
  • Vamos a diseño
  • Seleccionamos Edición HTML
  • Activamos la casilla de Expandir artilugios
  • Abrimos el buscador pulsando F3
  • Copiamos en el buscador esto: h3.post-title, .comments h4 {
  • Nos aparecerá resaltado algo así:
h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
}
  • Copiamos este código: text-align: center;
  • Pegamos este código debajo de margin, por ejemplo
h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
text-align: center;
}

Antes de guardar, pulsad en vista previa, para asegurarnos de que el borde ha desaparecido y está todo correcto.
Si está todo bien, pinchamos en guardar, y listo.


¿Cómo poner un color distinto a la primera letra de los títulos de Gadget?

Este es un efecto muy sencillito, pero puede animar vuestros títulos de gadget
  • Plantilla
  • Edición HTML
  • Pulsamos F3 para que nos salga el buscador
  • Pegamos esto en el buscador: h2 {
  • Nos saldrá algo así:



/* Headings
----------------------------------------------- */
h2 {
  margin: 0 0 1em 0;

  font: $(widget.title.font);
  color: $(widget.title.text.color);
  text-transform: uppercase;
}
  • Copia esto y pégalo justo debajo de la llave: 
.sidebar h2:first-letter {color: #FC8FC0;}
}
  • Nos tiene que quedar algo así:
/* Headings
----------------------------------------------- */
h2 {
  margin: 0 0 1em 0;

  font: $(widget.title.font);
  color: $(widget.title.text.color);
  text-transform: uppercase;
}
.sidebar h2:first-letter {color: #FC8FC0;}
}

Si pincháis en vista previa, comprobaréis cómo la primera letra de vuestros títulos de Gadget ha cambiado de color. En este caso se pondrá de color rosa, porque el código de color #FC8FC0 corresponde al color rosa que veis. 

Imagino que querréis cambiar de color, así que vamos a esta página: html-codes-color y elegimos el color que más nos guste. 

Abajo tenemos un recuadrito donde aparece el código del color que hemos elegido. 
  • Copiamos ese código 
  • Lo pegamos detrás de el símbolo # 
  • No borres ni el punto y coma ni la llave, solo las létras y números que corresponden al código de color.

Antes de guardar, pulsad en vista previa, para asegurarnos de que el borde ha desaparecido y está todo correcto.
Si está todo bien, pinchamos en guardar, y listo.



Y esto es todo por hoy!! Espero que os resulte fácil, útil y que os animéis a ponerlo en práctica.

Nos leemos el jueves con la entrada colaboración (palabrita que el jueves estará publicada a las 12 de la noche)

Un besazo y feliz martes


Hola hola!! Volvemos a la vida normal, o casi normal. Para mi esta será semana rara... trabajo tres días... además por la mañana. Así que se me hará raro (pero podré disfrutar de la maravillosa siesta, cosa que no puedo hacer el resto de días porque trabajo por las tardes). 


Después de esta explicación laboral que no viene a cuento, vamos a lo que nos interesa. Comenzamos la semana de entradas, con tres tutoriales para blog. De hecho, son tres de las preguntas que más me hacéis por e-mail. Así que voy a resolveros todas vuestras dudas. Más vale que estaba de vacaciones... porque os estoy aburriendo de tantas entradas: calendarios, diario de las buenas noticias, publicidad... Vamos que estamos que lo tiramos.

Sé que hoy tocaba colaboración, pero quería terminar bien la entrada, es laboriosa y quería quedara bien bien bien, y la he pasado al jueves (un cambio pequeñín). 

Ya sé que esta entrada no va a ser útil para todos, ya lo siento, pero intento responder a vuestras peticiones de la mejor manera posible. Hoy ganan unos...otro día ganarán otros. Como vais a ver los tutoriales son muy sencillos, no se tarda más de 5 minutos en hacer cada uno. Pero ya sabéis que si tenéis dudas... yo estoy encantada de responderlas!!

Quitar la sombra o recuadro que sale en las fotos de blogger:

Si no he enviado 30 emails respondiendo a esto, no he enviado ninguno. Así que como es una duda bastante común, os la voy a resolver de una vez por todas. Vais a ver qué sencillico, es. También podéis ver otro tutorial del mismo estilo en el blog de Las Creaciones de Bea y Natalia (no dejéis de visitarlas porque tienen un montón de tutoriales para blogger).

Aquí veis un blog de prueba en el que las fotos o imágenes salen con un recuadrito gris y sombras. Este efecto aparece tanto en la imagen de la entrada como en las imágenes que coloquemos en las columnas. Si nos gusta (a mi no mucho) lo dejamos, si no nos gusta...¡¡acabamos con él!!


Seguid el paso a paso:
  • Pinchamos en plantilla
  • Personalizar
  • Avanzado: aquí buscamos el apartado en el que pone imágenes.
    • Nos tenemos que asegurar de que el primer color (color de fondo) y el segundo (color del borde) estén en transparente.



Cuando lo hayamos hecho, pinchamos en Aplicar al blog.
  • Volvemos a blogger.
  • Pinchamos en plantilla
  • Editar HTML
  • Activamos el cuadrito que pone expandir artilugios.
  • Pulsamos F3 para que nos salga el buscador
  • Pegamos lo siguiente en el buscador: .post-body img
  • Nos saldrá algo parecido a esto:


.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,


.BlogList .item-thumbnail img {

  padding: $(image.border.small.size);

  background: $(image.background.color);
  border: 1px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);


Nos vamos a centrar en la parte coloreada de morado. Y lo que vamos a hacer es tan sencillo como cambiar cada uno de los números delante de px por un cero, así (recordad que esto lo tenéis que hacer en vuestra plantilla de HTML):

 -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
  box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);

De esta manera quitamos la sombra de la foto, pero no eliminamos el efecto, por si acaso algún día nos apetece volver a recuperarlo. Si es así, solo tendríamos que volver a escribir los mismo números.

Antes de guardar, pulsad en vista previa, para asegurarnos de que el borde ha desaparecido y está todo correcto.
Si está todo bien, pinchamos en guardar, y listo.



Centrar los títulos de los posts:

Otra duda recurrente. ¿Cómo centramos los títulos de los posts? Pues misterio resuelto:
  • Vamos a diseño
  • Seleccionamos Edición HTML
  • Activamos la casilla de Expandir artilugios
  • Abrimos el buscador pulsando F3
  • Copiamos en el buscador esto: h3.post-title, .comments h4 {
  • Nos aparecerá resaltado algo así:
h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
}
  • Copiamos este código: text-align: center;
  • Pegamos este código debajo de margin, por ejemplo
h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
text-align: center;
}

Antes de guardar, pulsad en vista previa, para asegurarnos de que el borde ha desaparecido y está todo correcto.
Si está todo bien, pinchamos en guardar, y listo.


¿Cómo poner un color distinto a la primera letra de los títulos de Gadget?

Este es un efecto muy sencillito, pero puede animar vuestros títulos de gadget
  • Plantilla
  • Edición HTML
  • Pulsamos F3 para que nos salga el buscador
  • Pegamos esto en el buscador: h2 {
  • Nos saldrá algo así:



/* Headings
----------------------------------------------- */
h2 {
  margin: 0 0 1em 0;

  font: $(widget.title.font);
  color: $(widget.title.text.color);
  text-transform: uppercase;
}
  • Copia esto y pégalo justo debajo de la llave: 
.sidebar h2:first-letter {color: #FC8FC0;}
}
  • Nos tiene que quedar algo así:
/* Headings
----------------------------------------------- */
h2 {
  margin: 0 0 1em 0;

  font: $(widget.title.font);
  color: $(widget.title.text.color);
  text-transform: uppercase;
}
.sidebar h2:first-letter {color: #FC8FC0;}
}

Si pincháis en vista previa, comprobaréis cómo la primera letra de vuestros títulos de Gadget ha cambiado de color. En este caso se pondrá de color rosa, porque el código de color #FC8FC0 corresponde al color rosa que veis. 

Imagino que querréis cambiar de color, así que vamos a esta página: html-codes-color y elegimos el color que más nos guste. 

Abajo tenemos un recuadrito donde aparece el código del color que hemos elegido. 
  • Copiamos ese código 
  • Lo pegamos detrás de el símbolo # 
  • No borres ni el punto y coma ni la llave, solo las létras y números que corresponden al código de color.

Antes de guardar, pulsad en vista previa, para asegurarnos de que el borde ha desaparecido y está todo correcto.
Si está todo bien, pinchamos en guardar, y listo.



Y esto es todo por hoy!! Espero que os resulte fácil, útil y que os animéis a ponerlo en práctica.

Nos leemos el jueves con la entrada colaboración (palabrita que el jueves estará publicada a las 12 de la noche)

Un besazo y feliz martes


Hola hola!! Volvemos a la vida normal, o casi normal. Para mi esta será semana rara... trabajo tres días... además por la mañana. Así que se me hará raro (pero podré disfrutar de la maravillosa siesta, cosa que no puedo hacer el resto de días porque trabajo por las tardes). 


Después de esta explicación laboral que no viene a cuento, vamos a lo que nos interesa. Comenzamos la semana de entradas, con tres tutoriales para blog. De hecho, son tres de las preguntas que más me hacéis por e-mail. Así que voy a resolveros todas vuestras dudas. Más vale que estaba de vacaciones... porque os estoy aburriendo de tantas entradas: calendarios, diario de las buenas noticias, publicidad... Vamos que estamos que lo tiramos.

Sé que hoy tocaba colaboración, pero quería terminar bien la entrada, es laboriosa y quería quedara bien bien bien, y la he pasado al jueves (un cambio pequeñín). 

Ya sé que esta entrada no va a ser útil para todos, ya lo siento, pero intento responder a vuestras peticiones de la mejor manera posible. Hoy ganan unos...otro día ganarán otros. Como vais a ver los tutoriales son muy sencillos, no se tarda más de 5 minutos en hacer cada uno. Pero ya sabéis que si tenéis dudas... yo estoy encantada de responderlas!!

Quitar la sombra o recuadro que sale en las fotos de blogger:

Si no he enviado 30 emails respondiendo a esto, no he enviado ninguno. Así que como es una duda bastante común, os la voy a resolver de una vez por todas. Vais a ver qué sencillico, es. También podéis ver otro tutorial del mismo estilo en el blog de Las Creaciones de Bea y Natalia (no dejéis de visitarlas porque tienen un montón de tutoriales para blogger).

Aquí veis un blog de prueba en el que las fotos o imágenes salen con un recuadrito gris y sombras. Este efecto aparece tanto en la imagen de la entrada como en las imágenes que coloquemos en las columnas. Si nos gusta (a mi no mucho) lo dejamos, si no nos gusta...¡¡acabamos con él!!


Seguid el paso a paso:
  • Pinchamos en plantilla
  • Personalizar
  • Avanzado: aquí buscamos el apartado en el que pone imágenes.
    • Nos tenemos que asegurar de que el primer color (color de fondo) y el segundo (color del borde) estén en transparente.



Cuando lo hayamos hecho, pinchamos en Aplicar al blog.
  • Volvemos a blogger.
  • Pinchamos en plantilla
  • Editar HTML
  • Activamos el cuadrito que pone expandir artilugios.
  • Pulsamos F3 para que nos salga el buscador
  • Pegamos lo siguiente en el buscador: .post-body img
  • Nos saldrá algo parecido a esto:


.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,


.BlogList .item-thumbnail img {

  padding: $(image.border.small.size);

  background: $(image.background.color);
  border: 1px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);


Nos vamos a centrar en la parte coloreada de morado. Y lo que vamos a hacer es tan sencillo como cambiar cada uno de los números delante de px por un cero, así (recordad que esto lo tenéis que hacer en vuestra plantilla de HTML):

 -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);
  box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);

De esta manera quitamos la sombra de la foto, pero no eliminamos el efecto, por si acaso algún día nos apetece volver a recuperarlo. Si es así, solo tendríamos que volver a escribir los mismo números.

Antes de guardar, pulsad en vista previa, para asegurarnos de que el borde ha desaparecido y está todo correcto.
Si está todo bien, pinchamos en guardar, y listo.



Centrar los títulos de los posts:

Otra duda recurrente. ¿Cómo centramos los títulos de los posts? Pues misterio resuelto:
  • Vamos a diseño
  • Seleccionamos Edición HTML
  • Activamos la casilla de Expandir artilugios
  • Abrimos el buscador pulsando F3
  • Copiamos en el buscador esto: h3.post-title, .comments h4 {
  • Nos aparecerá resaltado algo así:
h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
}
  • Copiamos este código: text-align: center;
  • Pegamos este código debajo de margin, por ejemplo
h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
text-align: center;
}

Antes de guardar, pulsad en vista previa, para asegurarnos de que el borde ha desaparecido y está todo correcto.
Si está todo bien, pinchamos en guardar, y listo.


¿Cómo poner un color distinto a la primera letra de los títulos de Gadget?

Este es un efecto muy sencillito, pero puede animar vuestros títulos de gadget
  • Plantilla
  • Edición HTML
  • Pulsamos F3 para que nos salga el buscador
  • Pegamos esto en el buscador: h2 {
  • Nos saldrá algo así:



/* Headings
----------------------------------------------- */
h2 {
  margin: 0 0 1em 0;

  font: $(widget.title.font);
  color: $(widget.title.text.color);
  text-transform: uppercase;
}
  • Copia esto y pégalo justo debajo de la llave: 
.sidebar h2:first-letter {color: #FC8FC0;}
}
  • Nos tiene que quedar algo así:
/* Headings
----------------------------------------------- */
h2 {
  margin: 0 0 1em 0;

  font: $(widget.title.font);
  color: $(widget.title.text.color);
  text-transform: uppercase;
}
.sidebar h2:first-letter {color: #FC8FC0;}
}

Si pincháis en vista previa, comprobaréis cómo la primera letra de vuestros títulos de Gadget ha cambiado de color. En este caso se pondrá de color rosa, porque el código de color #FC8FC0 corresponde al color rosa que veis. 

Imagino que querréis cambiar de color, así que vamos a esta página: html-codes-color y elegimos el color que más nos guste. 

Abajo tenemos un recuadrito donde aparece el código del color que hemos elegido. 
  • Copiamos ese código 
  • Lo pegamos detrás de el símbolo # 
  • No borres ni el punto y coma ni la llave, solo las létras y números que corresponden al código de color.

Antes de guardar, pulsad en vista previa, para asegurarnos de que el borde ha desaparecido y está todo correcto.
Si está todo bien, pinchamos en guardar, y listo.



Y esto es todo por hoy!! Espero que os resulte fácil, útil y que os animéis a ponerlo en práctica.

Nos leemos el jueves con la entrada colaboración (palabrita que el jueves estará publicada a las 12 de la noche)

Un besazo y feliz martes

Share to Facebook Share to Twitter Email This Pin This Share on Google Plus

93 comentarios:

  1. Jolin, que envidia ver con que soltura os movéis por el mundo html, lo hacéis tan sencillo que torpucones como yo nos animamos a tirarnos a la piscina! Gracias!

    ResponderEliminar
  2. Te agradezco mucho estos tutoriales. Los pondré en práctica en breve. Feliz día!

    ResponderEliminar
  3. Muchas gracias!!..e puesto en práctica los dos primeros y me ha encantado el resultado, mil gracias otra vez por todo lo que nos enseñas!!!

    Besitos

    ResponderEliminar
  4. No me lo puedo creer. ayer me quede hasta las 2 am intentando quitar los marcos, hice miles de búsquedas inútiles en internet, sin conseguirlo y termine con el cerebro en cortocircuito y ahora en un segundo ya esta!!! de verdad que tus tutos son la bomba!jaja. estaba dudando si apuntarme al curso por que no tengo el mismo programa de edicion digital, tengo photoshop y illustrator, aunque no los entiendo mucho, pero creo que me apuntare igual para ir teniendo mas idea, que te parece?

    ResponderEliminar
    Respuestas
    1. Hola!! Pues ya ves qué fácil era!!
      Respecto al curso... te puedes descargar el paquete office... Haz lo que tú veas.. si estás interesada lo compras, yo feliz de la vida!!
      Un besazoo

      Eliminar
    2. Tengo instalado algo que se llama open office, que supongo será una versión gratis para mac, y hay algo que se llama "dibujo", no he usado power point en mi vida, pero me da que es lo mismo ( que tanpoco he tocado), investigo un poco a ver que me cuentan ^.*

      Eliminar
  5. Muchas gracias. Esto solo sirve para la plantilla simple ????.
    He leido en un blog que la lista de seguidores desaparecerá, google reader y (friend connect) y tendremos que buscar soluciones alternativa como bloglowin o similar para poder seguir blogs, sabes algo de todo esto ???? porque realmente para las que no entendemos mucho es un problemón. MUCHAS GRACIAS POR TODO. Besos.

    ResponderEliminar
    Respuestas
    1. Estoy informándome!! Me desbordan tantas cosas!!! :) En cuanto sepa algo os cuento... pero mejor que preguntéis a quien lleve el blog del que me hablas!!

      Eliminar
  6. ¡Qué bien!
    Llevaba tiempo buscando para centrar el título, y ya lo he hecho!!
    Me ha sido muy útil, ¡gracias!

    (Saludos de café)

    ResponderEliminar
  7. Ya están aplicados los tres recursos :) El primero ya lo había hecho desde el blog de Bea y Natalia pero los demás no sabía :)
    SIEMPRE te sigo y me encanta todo todo lo que haces
    ¡Qué buen gusto tienes chica ;)!

    I ♥ live & u?

    ResponderEliminar
  8. Te encontré ayer a través de Coquitos o Aidixy y sus cosas, y todavía estoy alucinando. ¡Qué blog tan chulo! y sobre todo útil. Aún estoy asimilando lo de power point, toda mi vida laboral utilizándolo, y no se me había ocurrido hacerlo para diseñar cosas para el blog :S

    A ver si consigo ponerme al día...

    ResponderEliminar
    Respuestas
    1. Ah maja!! Power Point oculta grandes secretos!!! Sino pregunta a las chicas que están haciendo el curso!! :)

      Hay mucho que ver en el blog.... y mando mucha tarea! Soy una profe exigenteee Muackkk y bienvenidaa

      Eliminar
  9. da gusto leer esto... que facil nos lo pones!!! :D mil gracias guapa

    ResponderEliminar
  10. Muchas gracias por esta entrada, me viene estupendamente, seguro que utilizo algo en mi blog. Además lo explicas muy bien. Un besico.

    ResponderEliminar
  11. Muchas gracias, me vienen genial tus tutoriales e ideas, ahora me hace falta tiempo para ponerlo en práctica.

    Besos.

    Rocío

    ResponderEliminar
  12. Ay mil gracias!!!!! LLevaba eones intentando borrar el cuadrito de las fotos y había intentado con algún tutorial, pero no me salía del todo bien. Y con el tuyo, a la primera!!

    XX http://miramodernonosoybethditto.blogspot.com.es

    ResponderEliminar
    Respuestas
    1. Es fácil si sabes que hay que tocar!! me alegro que te haya servido!

      Eliminar
  13. Me parece muy útil....pero me da un poquito de miedo tocar html.....
    Saludos

    ResponderEliminar
    Respuestas
    1. Algún día te quitarás el miedo!!! :) No pasa nada

      Eliminar
  14. ¡Seguro que esta entrada le viene muy bien a mucha gente! Yo la sombra de las imágenes la borré hace tiempo, y de momento, los otros dos tutoriales no los voy a poner en práctica, pero me viene bien saber que están ahí por si acaso. ¡Gracias!
    Besos.

    ResponderEliminar
  15. He intentado hacer lo de centrar el titulo pero cuando pongo lo que tu dices en HTML no me subraya nada. Ya seguiré probando.

    Igual que lo de quitar el borde de las imágenes, ya de por sí en mi blog no salen, pero cuando abro lo de avanzados no aparece la opción de imágenes!!

    Pero por lo demás me encanta y estoy aprendiendo mucho con tus explicaciones.
    Saludos.

    ResponderEliminar
  16. Hola Carmen!! Claro, el tutorial es para la plantilla sencilla de blogger... por eso no te saldrá!

    ResponderEliminar
  17. Gracias!! El de la sombra, hace tiempo que lo descurbrí en otro blog, y la verdad es que es muy util! Y me parece que los otros dos que has puesto, pronto los pondré en práctica! Gracias :)

    Un besín!

    ResponderEliminar
  18. un tutorial estupendisimo

    http://losviajesysibaritismosdeauroraboreal.blogspot.com.es/

    ResponderEliminar
  19. Gracias May! Respondiste mi pregunta de los bordes! Y lo más divertido es que finalmente lo saqué del Blog de las Creaciones de Daniela y Natalia.
    Espero que te des un paseo por mi blog, para que veas cómo lo he podido mejorar en muchos aspectos gracias a tus tutoriales!
    http://graficosrelatos.blogspot.com/

    ResponderEliminar
  20. que bueno, creía que no iba a ser capaz y ha sido facilísimo, lo único que mi teclado no tiene F3 y he tenido que ir buscando, Sabes como sacar el F3

    ResponderEliminar
    Respuestas
    1. Soledad!!! Otra opción para que salga el buscador es que pulses, al mismo tiempo, ctrl + F

      Eliminar
  21. Que buena explicación, preguntas que me hacia y mira tu saliste maga que me leíste el pensamiento.
    Un saludo y buena vibra XD!!

    ResponderEliminar
  22. Ole Que sí
    Hasta ahora centraba cada título de post haciéndolo uno por uno con un "center" "/center" más bonito que un sol. Y como dice la de la tele ¡El frotar se va a acabar! Muchas gracias por compartirlo
    Besetes ^.^

    ResponderEliminar
  23. Muchisimas gracias por esta entrada. Yo fui una de las que te pregunto lo del borde de las imagenes, me volvia loca.. ;o)

    ResponderEliminar
  24. May! como puedo hacer lo de cambiar la primera letra de color con el 'nuevo' diseño del html? o sea cual artilugio tendría que abrir?

    ResponderEliminar
    Respuestas
    1. Tranqui!! en cuanto tenga un ratico actualizo estos tutoriales con la nueva plantilla de HTML. Por el momento, puedo decirte, que tienes que pinchar en las flechitas azules que salen a la izquierda. Actívalas todas... y después sigue el tutorial! Si no te sale tranquila, que actualizaré!!

      Eliminar
    2. a mí me han matao con esto de la nueva plantilla, me he vuelto un gran inepto, justo ahora que esetaba preparando un nuevo blog... he pinchado en todas las flechitas y no ha habido tutía de conseguir nada... SOS!!!

      Eliminar
    3. tranqui!!
      Cuando hayas desplegado todas las flechicas,pincha con el ratón sobre el panel de htlm. Después pulsa CTRL+F y te saldrá otro buscador dentro del cuadrito de html. Después prueba a escribir en ese buscador el código que quieras buscar! ;) A ver qué tal!!!
      Pero relaja chico del blog, que actualizaré estos tutoriales en cuanto tenga un ratico.
      Ha sido un poco jodienda, lo sé! Pero es lo que hay!!
      Un besazooo

      Eliminar
    4. no encuentro ninguna flecha azul, y todavia no actualizaste, por favor ayuda!

      Eliminar
  25. Hola, hace unos días quería cambiar el color del borde de entrada (espero explicarme bien) y no he podido porque han cambiado la plantilla, en edición HTML, creo que todo sigue ahí, pero la manera de buscar, es distinta, porque al buscar por ejemplo 'post-body img', no aparece, bueno ni eso ni nada. Y me encantaría saber cómo hacerlo ahora porque quiero quitarlo o cambiar el número de color. Un saludo y agradecida estoy de que me eches una mano, llevo ya una semana con esto.
    Lulú.

    ResponderEliminar
  26. Hola guapa!! Magníficas tus explicaciones, !!ya he conseguido centrar el blog!! Muchas grácias, y aprovecho para decirte que ya soy tu fiel seguidora. Por cierto, abusando un poquito de tus conocimientos, veo que el título queda demasiado pegado a la fecha. ¿Sabes la manera de bajarlo un poco? Te paso la url de mi blog para que lo veas por si no me he explicado bien. Es oasisingular.blogspot.com.es. Si puedes, pásate a ver si me puedes indicar como arreglarlo. Grácias nuevamente!!

    MAR

    ResponderEliminar
  27. Una vez más, muy bien explicado para que sepamos hacerlo y salga a la primera :)

    Gracias!!!

    ResponderEliminar
  28. Hola! yo quiero centrar el titulo de las entradas y con esta forma nueva que han puesto de html no encuentro nada! me podrías indicar como hacerlo?

    ResponderEliminar
  29. Hola guapa!!
    Estuve intentando quitar la sombra de las imágenes pero me sigue saliendo la sombra aun habiendo seguido todos los pasos...que puede estar pasando??

    Gracias

    ResponderEliminar
  30. Pero super bieeen! :) Gracias gracias por los tips y consejos :)

    ResponderEliminar
  31. Muchas gracias!!!!!

    Me estaba volviendo loca ya!
    hacía losmontajes en picmonkey con el fondo transparente y luego en blogger quedaban horribles! ahora ya está solucionado! Qué cambio!!

    MIL GRACIAS

    ResponderEliminar
  32. Muchisimas gracias! Llevo semanas tratando de hacerlo pero no encontraba como realizarlo... Than You So Much!

    ResponderEliminar
  33. Mi blog está en la nueva edición de HTML y esto no me sirve... Sabes como se hace en la nueva edición?

    ResponderEliminar
  34. Hola may excelente tu blog, estan super los tutoriales, me preguntaba si tienes alguno que trate de la barra de menu, como hacerla tan personalizada la tuya esta espectacular! y sino tienes donde podria conseguir un tuto!

    ResponderEliminar
  35. ¡Hola!

    Estoy intentando quitar los marcos a las fotos pero cuando voy a Plantilla, Personalizar, Avanzado... no aparece en el menú Imágenes. ¿Alguien me ayuda?
    Gracias :)

    ResponderEliminar
  36. Hola!! muchas gracias por tus tutos de power point, genial lo que se puede hacer!!! pero lo de los marcos de las fotos,... lo estoy intentando en una página que he creado dentro de blogger y no encuentro lo del .post-body img ni nada parecido. He mirado en la plantilla incluso en editar página en html y nada, la imagen me sale como un enlace https,.... alguna idea de lo que puedo hacer?
    Besos y gracias por tu trabajo!!!

    ResponderEliminar
  37. Oh dios mio llevo muchísimo tiempo intentando quitar lo de la sombra de las fotos y después de mirar en un montón de blogs de tutoriales con esta explicación he conseguido hacerlo! Mil gracias!! Me encanta el blog!!!!

    ResponderEliminar
  38. Eres la pera chica!
    Acabo de empezar con esto del blog y eres mi libro de cabecera. Sin tí no podría haber hecho nada. Ya he quitado la sombra de las fotos, he añadido las rayas a los menús de la izquierda, he incluido un boton de "subir" y lo que me queda. De verdad, si te tuviera delante te plantaba un par de besos. Eres genial!! Gracias
    Olga

    ResponderEliminar
  39. Hola!!!
    Quisieramos pedir tu ayuda en nuestro blog, andamos comenzando y la verdad que aqui nos enseñas bastante, lo que pasa es que al poner una imagen hasta arriba del blog tipo cabecera/banner de bienvenida (desde diseño y con el gadget de imagen) se ve un recuadro blanco alrededor de la imagen, mi pregunta es como puedo quitar eso blanco? Aquí ya vi como quitarle eso a las imágenes de los posts pero de los gadgets no se quitan! Si puedes revisar el blog sera de gran ayuda por si no nos damos a entender mexicoloveasia.blogspot.mx. Llevo ya varios días intentandole y pues imposible, no se quita de ninguna forma, espero que puedas ayudarnos.
    Felicidades por tu blog, bien lindo!

    ResponderEliminar
    Respuestas
    1. Te recomiendo que en el buscador pongas... SHADOW y se marcarán todas las sombras de fotos, de todas las imágenes. Pon 0 delante de px en todos los sitios donde aparezca la palabra shadow

      Eliminar
  40. No conseguí hacer lo de centrar los títulos :( No ha cambiado nada, quizá ya tenía algo diferente por tenerlos con color... ni idea
    Gracias por tu ayuda con estas cosillas, que a algunas se nos dan tan mal, y con estos tutoriales, conseguimos hacer algo al menos!
    Estás votada para los premios :)

    ResponderEliminar
  41. Yo no puedo cambiar el recuadro de las fotos ya que el diseño para modificar el HTML ha cambiado, y no existe la casilla expandir artilugios. No se como debo hacerlo entonces!!!

    Saludos

    ResponderEliminar
    Respuestas
    1. Hola!! ahora ha cambiado la plantilla pero sigue siendo muy fácil. Vas a plantilla... HTML... cuando estés dentro de esta plantilla pincha con el ratón dentro del cuadro donde aparecen todos los códigos. Da igual dónde pinches, solo haz click. Después pulsas CTRL+F para que se abra el buscador y sigues el tutorial!!

      Eliminar
    2. Muchas gracias May por el consejo!!! Tu blog es fantástico!!

      Ya lo hice de otro modo!!! Añadí el siguiente código al CCS:

      .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,

      .BlogList .item-thumbnail img {

      padding: none !important;

      border: none !important;

      background: none !important;

      -moz-box-shadow: 0px 0px 0px transparent !important;

      -webkit-box-shadow: 0px 0px 0px transparent !important;

      box-shadow: 0px 0px 0px transparent !important;

      Eliminar
  42. May! por mas que buscaba y rebuscaba por el ciberespacio no daba con la solución! me estaba volviendo loquisima! mil gracias de nuevo, me has salvado! Te invito a pasarte por mi blog dolcesentiredolci@blogspot.com.es
    Besotes :*

    ResponderEliminar
  43. Muchas gracias por tus tutoriales, May!!! Gracias a ti, mi blog está cambiando bastante de look!! Me encanta!!
    Besitos.

    ResponderEliminar
  44. Hola igual es una tonteria jiji pero no encuentro por ningun lado el expandir artilugios me podrias explicar la manera de abrirlo es que no he podido hacer nada de esto por no saber abrirlo espero que me puedas ayudar muchas gracias

    ResponderEliminar
  45. Hola May,
    el tutorial para centrar el título me ha venido genial, ahora me gustaría poner la fecha debajo porque encima del título no me convence. He buscado tutoriales al respecto y tras encontrar varios no me ha funcionado ninguno, el otro día casi desespero porque no consigo encontrar el fallo en el código html.

    Asi que desde aquí te propongo un próximo tutorial al respecto: "como mover de posición la fecha"
    Muchas gracias!!

    ResponderEliminar
  46. Hola! tengo una duda en cuanto a centrar el título de las entradas, colocas:
    "- Vamos a diseño
    - Seleccionamos Edición HTML
    - Activamos la casilla de Expandir artilugios"

    ¿Te refieres a plantilla en vez de diseño? Me aparece en plantilla "editar HTML" y no me sale lo de expandir artilugios sino "restablecer plantillas de artilugios a los valores predeterminados" no he querido probar nada porque me da miedo arruinarlo :/ si me puedes ayudar por favooor! Gracias!

    ResponderEliminar
    Respuestas
    1. No te preocupes, creo que ese mensaje salía en diseño anterior.

      Eliminar
    2. A lo mejor ya lo encontraste pero por si acaso. Yo tengo conocimiento cero, pero expandir artilugios es para un diseño antiguo como dice B Glamy. Ahora sólo tendrías que buscar el widget que te interesa en el código HTML y pinchar en la flecha negra que tienes a la izquierda de su código correspondiente. Esto te expande todo el código correspondiente a ese widget en cuestión. Ahora ya sólo te queda realizar las modificaciones que propone May. Suerte!!!

      Eliminar
  47. Hola, y como puedo hacer para centrar la fecha???

    ResponderEliminar
  48. creo qe ya no funciona este tutorial :c

    ResponderEliminar
  49. ¡Hola! Muchas gracias por el tutorial me pregunto ¿cabes como centrar la fecha en los títulos?

    ResponderEliminar
  50. hola, estoy un poco despistada porque no sé si este es el sitio adecuado para preguntar, pero por si las moscas lo intento....mi problema es que al subir fotos a blogger desde mi ordenador, me desvirtúa totalmente el color y la textura, como si las corrigiese automáticamente. antes me pasaba con las fotos de flickr, pero ahora con todas. las oscurece y las deja horrorosas....tanto que opto por no subirlas. anque no es una opción que me convenza, he intentado subirlas desde la url (que si algún día eliminan la foto, desaparecería del blog) pero tampoco funciona, me da error y dice que hay un problema en la url . ¿?. ¿hay alguna forma de desactivar esa opción y que no me cambie los colores?
    gracias de antemano!

    ResponderEliminar
    Respuestas
    1. Pasaron muchos días desde tu pregunta, pero por las dudas comento igual...
      Yo tenía un problema parecido, se trataba de retoques que hacía a mis fotos Google+
      Si este es el caso te cuento: En la sección de "Fotos" provablemente esté seleccionado "Ajuste Automático" (Sólo tienes que entrar en tu cuenta de G+ , Configuración, Ajuste Automático "desactivar" y listo!)
      --------------------
      May, tus tutoriales y recursos son geniales!!!!! Yo también me prendo al pedido del "centrado de fecha" y agrego... ¿podrás enseñarnos a colocar la fecha debajo del título? Un abrazo!! Vanina

      Eliminar
  51. Tengo un problema con al html, ya que se actualizo la edicion de html en blogger no me aparece nada de eso, y no puedo centrar los títulos alguien me puede ayudar.

    ResponderEliminar
  52. Hola, ¿como puedo cambiar el color de la barra donde aparecen los iconos de compartir en html?, ¿como poner color cuando respondo en los comentarios?

    ResponderEliminar
  53. Te quiero, si se que suena una burrada pero sin exagerar llevo 3 días enteros buscado y tocando para eliminar el borde de las imágenes y no había forma hasta que he dado con este post. Muchísimas gracias, eras la única que explica verdaderamente todos los pasos.

    ResponderEliminar
  54. Gracias mi amor, justo diste en el blanco, esto del internet cada vez facilita muchas las cosas, se te agradece, un besoteeee

    ResponderEliminar
  55. ¡Muchísimas gracias! Así todo parece tan sencillo :)

    ResponderEliminar
  56. Muchas gracias! lo intento y lo intento pero siempre me da un error, llevo ya dos días intentando desde windows,mac...y nada, me sale este error More than one widget was found with id: AdSense1. Widget IDs should be unique
    Como puedo arreglarlo?? gracias!

    ResponderEliminar
  57. Hola, te agradezco los tutoriales, siempre tan útiles y gráficos.

    ResponderEliminar
  58. Muchísimas gracias!
    Con una solución tan sencilla y en un problema tan básico estaba sudando la gota gorda.

    ResponderEliminar
  59. Ante todo muchisimas gracias por todos los tutoriales que nos cuelgas aquí. Yo también me encuentro como alguno de ellos. No hay manera de alinear el titulo, lo he copiado debajo y he guardado la plantilla y no ha pasado nada de nada. Porque puede ser? A alguien le ha pasado y lo ha podido solucionar? Muchas gracias.

    ResponderEliminar
  60. Te agradezco muchísimo esta entrada; es la mar de útil. ^-^

    ResponderEliminar
  61. Excelente si me funciono!! , disculpa una pregunta como hacer para organizar tus entradas en un menu a la derecha como en algunos blogs he visto;saludos y gracias de antemano

    ResponderEliminar
  62. Hola
    He hecho de todo y nada funciona, en el html no me aparece y hasta lo busque a mano y tampoco, trate de ponerlo en el CSS y menos, ya no se que hacer.
    Necesito ayuda

    ResponderEliminar
  63. Hola!! Por favor, necesito ayuda!! He creado una entrada en mi blog y cuando la he publicado, me he dado cuenta de que hay partes del texto sombreadas y yo no las he sombreado, ni tenía la intención. Por favor, ¿podrías ayudarme a quitar el sombreado? Muchas gracias y enhorabuena por tu blog, es muy útil. Saludos!!

    ResponderEliminar
  64. Hola! Podrias ayudarme? Quiero quitar el borde de las fotos de mi blog pero cuando voy a plantilla-personalizar-avanzado no aparece Imágenes. Igual es porque la plantilla de mi blog la cogí de un blog que hace plantillas bloggercandy.com
    ¿que puedo hacer?
    gracias<3

    ResponderEliminar
  65. Hola, estuve buscando por mucho tiempo este tutorial y al fin lo encontré!!! Muchas gracias, me preguntaba si habría alguna forma de poder poner la letra inicial en negrita, pero conservando el color que ya le di... de ser así podrías ayudarme a cambiarlo?

    besos♥

    ResponderEliminar
  66. Hola. Gracias por el tutorial. Lo he aplicado y ha quedado perfecto :D

    ResponderEliminar

Muchas gracias por escribirme!! Si quieres puedes hacer alguna petición, recomendación... ¡¡Me encanta leeros!!