Edita el cuerpo del Post.

En publicaciones anteriores explique como Editar el cuerpo & titulo de los Gadgets & como editar el Titulo de los post, pero también podemos cambiar el estilo predeterminado que traen las plantillas del "cuerpo" de las publicaciones.

Bien, antes de comenzar, les explicare que enseñare este tutorial de un método diferente. Les enseñare a editar directamente desde la plantilla, a cambiar & modificar, NO a agregar mas códigos.
Así que pediré atención en la lectura ya que tratare de ser lo mas especifica posible.
Eso si, no utilizare ningún vocabulario extravagante, tratare de asociar todo a palabras comunes que se asimilen o den una idea & ejemplifiquen.

Explicar de esta forma trae dos ventajas, no saturamos nuestro código de cosas innecesarias & comenzaran a aprender cada rincón de las plantillas blogger & lo general para diseñar cualquier otra web ~

1ER PASO: Para editar cualquier cosa en general, debemos tener en cuenta que queremos lograr o similar. Al cuerpo de nuestro post podemos colocare variedades de "accesorios" como:

• Estilos de bordes.
• Bordes redondeados.
• Sombra.
• Fondo de color.
• Fondo de imagen.
• Transparencia {opacidad}.

& otras variedades que entrarían en lo "complejo" que eso lo explicare {si es necesario} en un tutorial aparte para mejor comprensión.
También tenemos que tener en cuenta si agregaremos algún efecto hover, al pasar el cursor sobre el post, por ejemplo, lo básico seria lograr que cambie alguno de los "accesorios" que agregamos anteriormente, como: que cambie el color de los bordes al pasar el cursor.

2DO PASO: Una ves tenemos todo lo que queremos modificar en nuestro post. Busquemos en la plantilla como están definidos los valores del mismo dentro del código CSS.
Expliquemos mejor esto:

Para "editar" colores formato, posiciones, etc. se utiliza el código CSS. Para lograr darle diversos valores a un objeto determinado hay que definirlo con un nombre. 

En este caso, dentro de las plantillas del diseñador de blogger el cuerpo de los post, están definidos a partir del nombre "date-outer", asi que teniendo en cuenta esto, vamos a Plantilla / Edición HTML / Buscamos:

.date-outer {

Todos los "accesorios" que agregaremos o que ya están predeterminados, están colocados debajo de esta linea & antes de un cierre que lo determina una llave inversa a la que le sigue al nombre "}"
Bien. Sigamos.

3ER PASO: Como sabemos, TODAS las plantillas del diseñador de blogger varían en el diseño & por ende, varían en el contenido del código CSS, así que lo se encuentre debajo de la linea:

.date-outer {

es según la plantilla que estés editando. Lo que primero & principal buscaremos que este para borrarlo {si no esta mucho mejor} es lo siguiente:
CSS que corresponde a la sombra del cuerpo del post;

  -moz-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
  -goog-ms-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
  box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);

CSS que corresponde a las puntas redondeadas del cuerpo del post;

  -moz-border-radius: $(widget.border.radius);
  -webkit-border-radius: $(widget.border.radius);
  -goog-ms-border-radius: $(widget.border.radius);
  border-radius: $(widget.border.radius);

Repito: Si esto se encuentra en tu plantilla, debajo de "date-outer", deberás eliminarlo para poder comenzar a editar de manera mas limpia.

4TO PASO: Comencemos a editar! TODO aquello que quieras agregar deberá ir DEBAJO de la linea que venimos estudiando desde el 2DO PASO.
Comencemos con el borde del cuerpo del post. Es muy posible que ademas de ver los códigos de "Sombra" & "puntas redondeadas" encuentres algo así:

  border: 1px solid $(post.border.color);

Este es el borde del cuerpo del post.

Donde el color lo editas directamente desde PERSONALIZAR. Aquí podemos modificar el tamaño {1px} & el estilo {solid} que puedes aprenderlos aquí: Bordes CSS.

De NO estar esta opción, solo agregas lo siguiente:

border: 1px solid #ddd;

donde también debes modificar a tu gusto el color {#ddd}.

Hasta acá ya tenemos un "accesorio" agregado/editado.

5TO PASO: Ahora solo debes colocar de los siguientes efectos que dejare el código CSS, el que elegiste en el 1er paso & acomodarlos a tu gusto (recuerda colocarlo debajo de "date-outer" & que el CSS tenga tanto la llave de inicio "{" como la de cierre "}")

SOMBRA: aprende a editarla aqui: Imagenes con sombra.

box-shadow: 1px 1px 0px #000;

BORDES REDONDEADOS: ayúdate con este generador: CSS Border radius.

border-radius: 10px;

IMAGEN DE FONDO: ten en cuenta que no deben se fondos muy cargados, ya que no se podra entender el texto que contenga el post.

background-image: url(AQUÍ TU IMAGEN);

TRANSPARENCIA {opacidad}: deberás cambiar el valor 9; la escala es de 1 a 9. Ten en cuenta que entre menor sea el valor, mayor sera la transparencia.

opacity: 0.90;

Lo que aquí falta, es como editar el color de fondo, pero generalmente el fondo del post, se edita directamente desde personalizar.

Hasta aquí ya tenemos nuestro post modificado a nuestro gusto & con un toque nuevo de originalidad. 

¿ Como crear efecto "HOVER" ?

Como hablamos en el 1ER PASO, podemos crear a partir de los "accesorios" que agregamos a un comienzo a nuestro post para editarlo, un efecto al pasar el cursor por arriba de este.

Podemos lograr que al pasar el cursor sobre el post, este cambie colores, estilos de bordes, forma & demas partiendo desde la primera edición.

Para esto es necesario AGREGAR un nuevo código CSS a nuestra plantilla, que sera el mismo "date-outer" pero hover {Un ejemplo similar que explica este procedimiento con imágenes es este: Crear efectos hover}.

Vamos a Plantilla / Edición HTML / & buscamos la siguiente linea:

]]></b:skin>

ARRIBA de ella agregamos lo siguiente:

.date-outer:hover {
AQUÍ EL CÓDIGO CSS
}

Como se explico en el 2DO PASO, utilizamos el nombre con el cual se definen los valores para el objeto determinado que queremos editar mas ":hover" que sera lo que nos ayudara a completar nuestro efecto.

Donde bien dice "AQUÍ EL CODIGO CSS" hace referencia a los "accesorios" que agregamos o editamos en los pasos anteriores que ahora queremos que cambie al pasar el cursor.

EJEMPLO: Vamos a hacer un ejemplo con el borde.

Si hoy colocamos debajo de ".date-outer {" lo siguiente:

border: 5px solid #000;

& quiero que este borde que tengo, cambie de color, DENTRO de:

.date-outer:hover {
AQUÍ ADENTRO
}

colocare lo siguiente:

border: 5px solid #f00;

donde cambia mi borde de color negro al rojo a pasar el cursor.

Este cambio sera brusco, cambiara simple & sencillo. Para crear un efecto mas lento aprende aquí como colocar "transition" en tu CSS: Trancision para efectos.

Espero que se entienda lo mejor posible!

& estén atentos a la publicación de mañana, ultima publicación del 2013.

~