Edita el Post-fotter / Post-header + Estilo "efecto giro-x"

Recuerdo que entre los tutoriales tenemos como tener un "Post-fotter deslizable" pero... ¿Como editarlo en general? ¿Y el post-header?

Primero que nada debemos tener en cuenta que, sea debajo del titulo o al final de la entrada, la información de los post es muy útil muchas veces.
Si tu blog tiene mas de un autor, allí se aparecerá quien escribió que entrada; Si tu blog esta organizado por etiquetas, allí podrás facilitarle al lector como clasificas tus entradas; Si quieres que tus entradas vueles por a red, allí puedes colocar para compartir.
Ademas de clasificar tu contenido, &/o agregar alguna otra información básica, casi siempre es útil... por eso mismo debe estar a tono al diseño!

Como editar el post-footer/post-header ¿?

Primero que nada nos dirigimos a Diseño/Entradas del Blog/Editar:

Aquí podremos editar los elementos que tendrá nuestro pie de entrada o cabecera de entrada; seleccionamos los que queremos que estén en nuestra entrada & luego los situamos en el lugar donde mejor nos parezca:

Como pueden ver en la ultima imagen, el post-footer o pie de entrada, tiene tres lineas para ubicar lo elementos, lo que hace mas organizada la ubicación & mas amplia la elección!
Esto se debe a que el post-footer esta pensado para que contenga la mayor información de la entrada, ya que esta ubicada estratégicamente para cuando uno finaliza la lectura del contenido & el post-header, esta principalmente para ubicar datos como la fecha &/o el autor.

Ahora nos toca lo divertido

Una vez listo los anterior, nos vamos a Plantilla/Edición HTML/ & buscamos (CTRL + F dentro del cuadro del código) UNA de las siguientes lineas según lo que queremos editar:

.post-header {

para editar la información del post debajo del titulo.

.post-footer {

para editar la información del post al final de la entrada.
Luego de encontrar lo que buscamos comenzaremos a editar! DEBAJO de esas lineas agregaremos los siguiente:

background: #FFFFFF; /* COLOR DE FONDO */
border: 1px solid #FFFFFF; /* ESTILO DEL BORDE */
border-radius: 10px; /* BORDES REDONDEADOS */
padding: 5px;
box-shadow: 1px 1px 1px #FFFFFF; /* SOMBRA DE LA CAJA */
font-size: 10px;  */TAMAÑO DE LETRA */
font-family: courier; /* TIPO DE LETRA */
margin: 0px -15px 1em -15px ;

Editas lo marcado & ya tienes tu post-header o post-fotter editado, perfecto para que el diseño quede completo!

Nota interesante!

Si cuando buscas las lineas .post-fotter o .post-header & debajo ya encuentras la linea:

margin: 0 0 1em 0;

o alguna similar, cambiala por esta otra linea:

margin: 0px 0px 10px 0px;

¿Para que es esto? 

Bien, lo que realiza el "margin" es exactamente eso, un margen, una distancia alrededor segun los valores que le demos. 

En el caso de la ultima linea, las distancias son:

• 0px indica la distacia que hay desde arriba (es 0 en este caso).
• 0px es la distancia que hay desde el lado derecho.
• 10px es la distancia que hay desde abajo.
• 0px la distancia hacia el lado izquierdo.

¿Para que explico esto? 

Explico esto ya que, si quieres que tu post-header o post-fotter que de esta forma:

sin los espacios laterales, debes cambiar los valores del margin, de esta forma:

margin: 0px -10px 10px -10px;

donde los valores negativos (los que tienen el signo "-") son los que hacen lo contrario a los positivos, en vez de una distancia se acercan.

Cual es el efecto "giro-x" ¿?

Lo que les mostrare con este estilo es que puedes agregarle efecto "hover", es decir al pasar el cursor; nuestro post-fotter o post-header tendría este movimiento:

VISTA PREVIA

Para lograr esto, nos dirigimos a Plantilla/Edición HTML donde buscaremos la siguiente linea (CTRL + F):

]]></b:skin>

ARRIBA de ella colocaremos el siguiente code CSS:

.post-header {
background: #4C5066; /* COLOR DE FONDO */
color: #FFFFFF; /* COLOR DEL TEXTO */
text-align: center; /* UBICACIÓN DEL TEXTO */
font-size: 10px; /* TAMAÑO DEL TEXTO */
letter-spacing: 3px; /* ESPACIO ENTRE LETRAS */
text-transform: uppercase;
margin: 0px -10px 1em -10px;
padding: 10px;
-webkit-transform: rotateX(0deg);
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
transition: all 0.9s ease;
}
.post-header a {
  color: #E06557; /* COLOR DE LOS LINKS */
}
.post-header:hover {
-webkit-transform: rotateX(360deg);
-webkit-transition: all 0.9s ease;
-moz-transition: all 0.9s ease;
-o-transition: all 0.9s ease;
transition: all 0.9s ease;
}

Editas lo marcado a tu gusto!
Ahora bien, lo que se encuentra editado en negrita ("header") lo puedes cambiar por "footer" si lo que quieres es agregarle el efecto a tu pie de entrada.

Cualquier duda/consulta/ideas, deja tu comentario!

Abrazos de colores,

~ヾ(･ω･*)ﾉ☆