Hola lectores y bloggeros, el lunes pasado no subi tutorial, la verdad es que se me olvido, hay ocasiones en la que se me olvida que tengo un blog :D, en fin, es personalizar los títulos de los post/entradas.
Esta algo largo pero es debido a que les muestro diferentes formas de personalizarlos a sus gustos y hay bastantes imágenes. Espero y os guste ^^
Para utilizar cualquier código de este tutorial deben de ingresar a Plantilla → Personalizar → Opciones personalizadas → Añadir CSSPERSONALIZAR LOS TÍTULOS DE LOS POST
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**/
}
Recuerda jugar con los bordes y colores!
__________ Solid
.................... Dotted
--------------- Dashed
========= Double
Te quedara algo asi:
Les explico un poco lo de los bordes:
Border: 2px Solid #000000 | Sirve 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 | (ver más colores)
Existen otros 2 estilos: Inset y Outset, no los pongo debido a que seria mucha imagen y esto seria más largo
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 líneas, 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 línea superior) (#000000: indica el color de la línea| 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 línea inferior) (#000000: indica el color de la línea| Ir esta página para ver más colores)
Pueden dejar solo la linea de abajo o la de arriba!, si es asi solo borran border-bottom/top: 3px solid #000000 y cambian el color, grosor y estilo del borde
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**/
}
Esta imagen la tome prestada xD
Título con fondo de color
.post h3 {
background: #90cbcd; /**Fondo 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: #ffffff; /**Color del título**/
text-align: center; /**centrar título**/
}
background: #90cbcd; /**Fondo 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: #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 :)
Background: Aquí es donde cambiamos el color de fondo, cambiar el código por el color que mejor combine en nuestro blog (ver más colores)
Título 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**/
}
O si lo prefieres en la parte inferior pues solo cambias BORDER-TOP por BORDER-BOTTOM
También puedes tener un recuadro alrededor, te dejo el código.
Título con color de fondo y todos los bordes
.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**/
}
background: #f77e90; por...: background: url("URL dela imagen") top left repeat; y listo.
SUPER IMPORTANTE:
ღ El fondo de imagen no siempre se puede, tendras que ir intentando miles de veces hasta que encuentres una imagen que os pueda coger el blog y se visualice, yo no les recomiendo que le pongan imagen de fondo.
ღ Recuerden jugar con los estilos, grosores y colores de los bordes y fondos
ღ Todo lo que diga BACKGROUND es el fondo (con color o imagen).
ღ Recuerden que los bordes pueden darles colores y estilos diferentes a cada uno: ejemplo:
border-bottom: 3px solid #fb9db6; /**Línea inferior **/
border-top: 3px dashed #fdcfc0; /**Línea superior **/
border-left: 3px double #ff99cc; /**Línea izquierdo **/
border-right: 3px dotted #d4ffea; /**Línea derecho**/
EL CÓDIGO UTILIZADO EN LA IMAGEN ES:
.post h3 {
background: #e7c5e4;
border-bottom: 3px solid #b51212; /**Línea inferior **/
border-top: 3px dashed #9e6fd4; /**Línea superior **/
border-left: 3px double #feff57; /**Línea izquierda **/
border-right: 3px dotted #2db4b4; /**Línea derecha**/
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**/
}
Eso es todo!
Se que es largo pero es porque demuestro diferentes formas de hacerlo.
Espero y les sirva de mucho :D
Gracias por el tutorial
ResponderBorrar:D
BorrarGracias por el tutorial <3
ResponderBorrarAhora probaré a ver qué tal queda en mi blog :)
SUERTE <3
Borrar¡Hola!
ResponderBorrarmuy chulo el tutorial, estoy segura que le vendrá bien a la gente :).
Que pases una buena semana <3
:d Gracias
Borrar