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


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.

Megapack
elige los 5 cursos que tú quieras
Curso
presentaciones
con power point
Pack
Pequeño gran emprendedor
Curso
diseña tu marca
personal
precio: 75€
precio: 17€
precio: 52€
precio: 35€
catálogo completo 
de cursos online
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
N E W S L E T T E R

Al suscribirte a esta cartica recibirás noticias exclusivas, descuentos, preventas y material exclusivo para gente VIP. 


Tus datos serán tratados de acuerdo a la política de privacidad, faltaría más. Yo, Maite, soy la que te enviará toda la información pero le pido ayuda a MadMimi. No serán cedidos a terceros, ni utilizados para otros fines que no sean los expuestos anteriormente. Si lo deseas, podrás darte de baja y no volveré a utilizar tus datos. Y, para ejercer cualquier derecho que tengas, escríbeme a hola@creativemindly.com



SI TE HA GUSTADO ¡COMPÁRTELO!

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.

Megapack
elige los 5 cursos que tú quieras
Curso
presentaciones
con power point
Pack
Pequeño gran emprendedor
Curso
diseña tu marca
personal
precio: 75€
precio: 17€
precio: 52€
precio: 35€
catálogo completo 
de cursos online
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
N E W S L E T T E R

Al suscribirte a esta cartica recibirás noticias exclusivas, descuentos, preventas y material exclusivo para gente VIP. 


Tus datos serán tratados de acuerdo a la política de privacidad, faltaría más. Yo, Maite, soy la que te enviará toda la información pero le pido ayuda a MadMimi. No serán cedidos a terceros, ni utilizados para otros fines que no sean los expuestos anteriormente. Si lo deseas, podrás darte de baja y no volveré a utilizar tus datos. Y, para ejercer cualquier derecho que tengas, escríbeme a hola@creativemindly.com



SI TE HA GUSTADO ¡COMPÁRTELO!
Share to Facebook Share to Twitter Email This Pin This Share on Google Plus

Otros posts intersantes: