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**/
}
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)
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**/
}
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**/
}
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**/
}
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**/
}
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
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)
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**/
}
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**/
}
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**/
}
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**/
}
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**/
}
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
Hay muchas posibilidades para personalizar el titulo de las entradas de blogger , de seguro más de alguna les gusto para su blog.
No hay comentarios: