29 de agosto de 2016

Tutorial: {Personalizar los titulos de los post}


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 ^^

PERSONALIZAR LOS TÍTULOS DE LOS POST
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**/
}

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**/
}

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**/
}



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**/
}


Si lo que quieres es una imagen de fondo solo debes cambiar:
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

6 comentarios:

Hola!
El blog es tanto tuyo como mio, yo solo expreso mi opinión y hago ver los libros desde otra perspectiva <3.
Cualquier comentario que no sea ofensivo o SPAM masivo será bienvenido.
Un beso. Felices Lecturas.

Gaby. Con la tecnología de Blogger.