Personalizar los títulos de los Post.

Hola, hola amigos! Que tal su fin de semana?? Espero que muy tranquilo y relajador :)

El día de ayer lo aproveche para hacer este tutorial, es muy útil y super fácil, me encanto muchísimo que ahora mismo tengo personalizado el titulo de las entradas. Como ya ha deducido jeje el tutorial de hoy es sobre la personalización de los titulos de los post. Encontré 20 formas de personalizarlo y seguro existen más formas todo es cuestión de jugar con las variables, colores y fondos.

Para utilizar cualquier código de este tutorial deben de ingresar a Plantilla → Personalizar → Opciones personalizadas → Añadir CSS

Título con recuadro

.post h3 {
border: 2px solid #000000; /**Grosor y color del recuadro**/
margin:.25em 0 0;
padding:0 0 0px;
font-size:170%; /**Tamaño del texto**/
line-height:1.4em; /**Altura del recuadro**/
}
h3.post-title a, h3{
color: #000000; /**Color del título**/
text-align: center; /**centrar título**/
}

------------ Voy a explicar un poco el código ---------

Border: 2px Solid #000000 | Para cambiar el aspecto de este código debemos de cambiar las variables de border: (2px indica el grosor del recuadro) ( Solid: indica el estilo del recuadro que puede variar según el ejemplo de las siguientes imágenes) (#000000: indica el color del recuadro | IR A ESTA PÁGINA PARA VER MÁS COLORES)

Aparte de los estilos que vimos anteriormente también existen estos tres estilos que nos aportan más ideas para personalizar el titulo de los post.
Ingresar a Plantilla → Personalizar → Opciones personalizadas → Añadir CSS

.post h3 {
border: groove #f77e90; 3px; /**Estilo y color del recuadro**/
margin:.25em 0 0;
padding:0 0 0px;
font-size:190%; /**Tamaño del texto**/
line-height:1.9em; /**Altura del recuadro**/
}
h3.post-title a, h3{
color: #000000; /**Color del título**/
text-align: center; /**centrar título**/

}

------------ Voy a explicar un poco el código ---------

border: groove #000000 3px | Para cambiar el aspecto de este código debemos de cambiar las variables de border: (3px indica el grosor del recuadro) ( groove: indica el estilo del recuadro que puede variar según el ejemplo de las siguientes imágenes) (#f77e90: indica el color del recuadro | IR ESTA PÁGINA PARA VER MÁS COLORES)

Título con líneas

.post h3 {
border-top: 3px solid #000000; /**Línea superior **/
border-bottom: 3px solid #000000; /**Línea inferior **/
margin:.25em 0 0;
padding:0 0 2px;
font-size:190%; /**Tamaño del texto**/
line-height:1.9em; /**Altura de la linea inferior**/
}
h3.post-title a, h3{
color: #000000; /**Color del título**/
text-align: center; /**centrar título**/
}

También hay más opciones para personalizar nuestro titulo del post con lineas, recuerden que para aplicar este código deben de copiarlo y pegarlo en el CSS de su blog

------------ Voy a explicar un poco el código ---------

border-top: 3px solid #000000 | Para cambiar el aspecto de este código debemos de cambiar las variables de border: (3px indica el grosor del recuadro) ( border-top: indica la linea superior) (#000000: indica el color de la linea| IR ESTA PÁGINA PARA VER MÁS COLORES)

border-bottom: 3px solid #000000 | Para cambiar el aspecto de este código debemos de cambiar las variables de border: (3px indica el grosor del recuadro) ( border-bottom: indica la linea inferior) (#000000: indica el color de la linea| IR ESTA PÁGINA PARA VER MÁS COLORES)

.post h3 {
border-bottom: 3px solid #000000; /**Línea inferior **/
margin:.5em 0 0;
padding:0 0 2px;
font-size:190%; /**Tamaño del texto**/
line-height:2.9em; /**Espacio de la linea de abajo**/
}
h3.post-title a, h3{
color: #000000; /**Color del título**/
text-align: center; /**centrar título**/

}

Existen mas estilos utilizando el código de Titulo con lineas. En este caso elimine la linea de border-top y deje la linea de border-buttom y asi podemos ir jugando con las variables y dejar el estilo que mejor combine con el blog. Recuerden que puede cambiar el estilo de *Solid por los estilos de los ejemplos en la siguiente imagen

Título con imagen

.post h3 {
padding-left: 20px;
background: url(URL de la imagen) center left no-repeat;
border-bottom: 3px solid #000000; /**Línea inferior **/
margin:.5em 0 0;
padding:0 0 2px;
font-size:190%; /**Tamaño del texto**/
line-height:1.9em; /**Altura de**/
}
h3.post-title a, h3{
color: #000000; /**Color del título**/
text-align: center; /**centrar título**/
}

Con este código podemos colocar una imagen mediante CSS al titulo de las entradas del blog, puede ser una imagen de formato Png o Gif .

------------ Voy a explicar un poco el código ---------

Background: url | Colocar la URL de la imagen en formato Png o Gif

Título con fondo de color

.post h3 {
background: #90cbcd;
margin:.5em 0 0;
padding:0 0 2px;
font-size:160%; /**Tamaño del texto**/
line-height:1.9em; /**Altura del recuadro**/
}
h3.post-title a, h3{
color: #ffffff; /**Color del título**/
text-align: center; /**centrar título**/
}

Si no nos convence las opciones anteriores podemos utilizar este código que es el que tengo ahora mismo en mi blog :)

------------ Voy a explicar un poco el código ---------

Background: Aqui es donde cambiamos el color de fondo, cambiar el código por el color que mejor combine en nuestro blog IR A ESTA PÁGINA PARA VER MÁS COLORES

Titulo con color de fondo y borde superior

.post h3 {
background: #fec2bb;
border-top: 6px solid #fc8296; /**Línea superior**/
margin:.5em 0 0;
padding:0 0 2px;
font-size:160%; /**Tamaño del texto**/
line-height:1.9em; /**Altura del recuadro**/
}
h3.post-title a, h3{
color: #ffffff; /**Color del título**/
text-align: center; /**centrar título**/
}

Titulo con color de fondo y borde inferior

.post h3 {
background: #f77e90;
border-bottom: 6px solid #000000; /**Línea inferior**/
margin:.5em 0 0;
padding:0 0 2px;
font-size:160%; /**Tamaño del texto**/
line-height:1.9em; /**Altura del recuadro**/
}
h3.post-title a, h3{
color: #ffffff; /**Color del título**/
text-align: center; /**centrar título**/
}

Titulo con color de fondo y recuadro

.post h3 {
background: #f77e90;
border: 3px solid #000000; /**Grosor y color del recuadro**/
margin:.5em 0 0;
padding:0 0 2px;
font-size:160%; /**Tamaño del texto**/
line-height:1.9em; /**Altura del recuadro**/
}
h3.post-title a, h3{
color: #000000; /**Color del título**/
text-align: center; /**centrar título**/
}

Título con imagen de fondo

.post h3 {
background: url("URL dela imagen") top left repeat;
margin:.5em 0 0;
padding:0 0 2px;
font-size:160%; /**Tamaño del texto**/
line-height:2em; /**Altura del recuadro**/
}
h3.post-title a, h3{
color: #000000; /**Color del título**/
text-align: center; /**centrar título**/
}

Este estilo es parecido al anterior, en lugar de colocar un color de fondo vamos a colocar una imagen de fondo

------------ Voy a explicar un poco el código ---------

Background: url | Aqui es donde colocamos la URL de la imagen