Edita el "Post-title" {Titulo del post}

Este tutorial sera una continuación del que publique como "Fuente Original {Title-post}".

Les recuerdo que es según la plantilla que utilices el tutorial va a funcionar, yo siempre me baso en plantillas del diseñador de blogger.

UN PEQUEÑO EJEMPLO: {Solo es ejemplo, tu lo editas a tu gusto}

click para tamaño original.

Para editar el titulo del post ve a Plantilla / Edición HTML & buscamos [Ctrl + F]:

]]></b:skin>

ARRIBA Pegamos:

h3.post-title {
color: #000; /* COLOR DEL TITULO */
background: #fff url(URL DE TU FONDO); /* FONDO COLOR E IMG */
text-shadow: 2px 2px 0px #000; /* SOMBRA DEL TEXTO */
border: 7px solid #000; /* BORDE */
text-align: center; /* POSICIÓN DEL TEXTO */
border-radius: 10px 0px 10px 0px; /* BORDES REDONDEADOS */
box-shadow: 2px 2px 10px #000; /* SOMBRA DE LA CAJA */
margin-bottom:10px;
padding: 10px;
}
/* EDITA AL PASAR EL CURSOR */
h3.post-title:hover {
color: #000;
background: #fff url(URL DE TU FONDO);
border: 7px solid #000;
text-align: center;
border-radius: 0px 10px 0px 10px;
box-shadow: 2px 2px 0px #000;
}

Edita lo marcado.
Algunas ayudas:
Posición: Right {derecha}; Left {izquierda}; Center {centro}.
Sombra de la caja: Guíate con la explicación de este tutorial "Imágenes con sombra"
Bordes redondeados: Busca la combinación que te guste con ayuda de esta pagina, CSS Border Radius.
Bordes: Relee este tutorial "Bordes".
Sombra del Texto: Relee este "Texto con sombra".

Ten en cuenta:
El color del titulo de los post se edita desde el diseñador de blogger, pero NO es igual en todas las plantillas, en algunas el titulo tiene los colores del enlace, por eso mismo le agregue el "color: #COLORDELTITULO;"  donde podrás cambiar el color del titulo & el color del mismo al pasar el cursor.

Como logro el borde doble ¿?
Bien, para lograr el borde doble & elegir ambos colores diferentes {es decir, el que quieras}, hay un borde que se divide pero no es muy "estético", editaremos la parte de:

box-shadow: 2px 2px 10px #000;

Reemplazándola por:

box-shadow: inset 9px 0 0px 0 #000;

Donde dice "#000" es el color de uno de los bordes.
Negativas: no podrás tener la sombra que muestra la imagen.