Personalizar los títulos de los post
22.2.15
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**/
}
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.
Cual es el que van a utilizar ?
me encantaría leer sus comentarios ♥
40 comentarios
Oooooh que chulo Wendy, no se si seré capaz de hacerlo pero intentarlo lo voy a intentar. El resultado es monísimo, espero no liarme mucho. Si lo consigo te lo muestro. Muchísimas gracias por enseñarnos tantas cosas bonitas para nuestro Blog. Un besazo guapa
ResponderBorrarHola Marian! De seguro te sale a la primera, solo es de copiar y pegar el código en la parte del CSS de blog y luego codificarlo! ♥♥
Borrar¡Madre mía! ¡Qué lujazo! Muuuuuuuuuuuuuuuuuuuchas gracias, guapa. Enseguida los pongo en práctica. Un besazo.
ResponderBorrarDe nada, un gusto compartir lo que me gusta aprender ♥
BorrarMe gustaron muchisimooo :D Utilice el tercero :3 gracias por compartir, linda. Besitos.
ResponderBorrarHola! ha quedado genial el recuadro en tu blog ♥
BorrarGracias un muy buen post y muy útil.
ResponderBorrarPrecioso Wendy, me lo apunto.
ResponderBorrarMañana mismo me pongo a ello ....porque me mola la idea...ahora a ver que tal me queda....que eso es otra cosa... Jajajajaja... Besines y gracias
ResponderBorrarJo, no sabía que se pudieran hacer cosas tan bonitas. Mil gracias.
ResponderBorrarjooo! sii, un montón de cosas...
BorrarQué chulo todo, tiempo ven a miiii!!!!! Jajajaja. Besitos guapa
ResponderBorrarEstoy super emocionada Wendy, acabo de ponerlo en mi blog y lo veo taaaan bonito :D Muchísimas gracias preciosa, me encantan estos tutoriales son muy muy prácticos. Un besazo, te dejo el link de mi blog por si kieres ver como me ha quedado http://eldiariodemarian75.blogspot.com.es/
ResponderBorrarHola Marian! Ha quedado muy bonito en tu blog :) Me alegra saber que el tutorial te ha gustado, espero seguir haciendo más de este tipo ♥
BorrarElegi el de color...me encanta como queda. Muchas gracias)
ResponderBorrarUn saludo.
Que bien! Queda bonito con la plantilla de tu blog ♥
BorrarHola Marian...llevaba tiempo buscando cómo hacer esto y por fin te he encontrado!!!
ResponderBorrarMi blog comienza a parecer "decente" y gracias a ti. Además muy bien explicado y me ha salido a la primera.
Gracias
¡Saludos Wendy!
ResponderBorrarMe ha ENCANTADO este tutorial, no tienes idea cuanto lo he estado buscando. Soy básciamente "nueva" en este mundo blogger (enserio, solo llevo una semana) y no tenía ni idea que este montón de cosas que enseñas se podían a hacer. ¡Mi blog está cada vez más bonito gracias a ti! De verdad, muchísimas gracias <3
Con todo el amor desde Colombia <3
Hola, hola.. Me alegra saber que los tutoriales te son utiles para tu blog ♥ Y felicidades por iniciarte en este mundo blogger :) ♥
BorrarMuchas gracias! Me sirvió de mucho. La manera como explicas es genial!
ResponderBorrarUn gusto poder ayudarte ♥
BorrarUff no te imaginas esto me ha servido un montón! muchísimas gracias :)
ResponderBorrar¡Qué me alegra que te sea útil este tutorial! un saludito
Borrar¿Wendy cómo se puede aplicar esto sólo en algunas entradas? Estoy tratando de hacerlo de varias maneras y no logro dar con la clave. Un saludo.
ResponderBorrarHola Rebeca, no sé si exista forma pero por lo que se este estilo se aplica a todas las entradas, ya que el css se aplica al h3.post-title de la plantilla y este se refiere e todas las entradas.
BorrarHola!!! ¿Cómo puedo aplicar estos recuadros o diferentes efectos a los gadgets?
ResponderBorrarY al texto de las entradas????
Gracias y un saludo!!
Hola, para cambiar el estilo a los títulos de gadgets tienes que escribir .sidebar h2{ y escribir las lineas de código con el estilo que quieres.
Borrar¡Muchísimas gracias, Wendy! Muy sencillo y el resultado es justo como quería. ¡Mil gracias!
ResponderBorrar¡Un besote!
Un poco tarde, pero te escribo para darte las gracias, lo utilicé en mi blog. Un abrazo!
ResponderBorrarGracias~, me ha sido de mucha ayuda
ResponderBorrarMuchísimas gracias de verdad! He usado el código de la imagen en mi blog y queda de maravilla, eres una crack! Saludos
ResponderBorrar¡Qué alegría ayudarte Dan! Gracias por tu visita
BorrarQue guía más estupenda Wendy, me ha venido fenomenal porque quería retocar la línea y el color de mi título y no era capaz de recordar ni encotrar el código.
ResponderBorrarUna página estupenda, gracias por la ayuda, me pasaré por aquí un montón. Besines.
¡Hola! Qué me alegra que este post te sea de ayuda :D la verdad que son cositas pequeñas pero dan bonitos toques al blog
BorrarHola. Quería hacer una consulta, es posible agregar algún parámetro para que el ancho del recuadro se adecue a la cantidad de caracteres del texto. Hay títulos que son largo, pero también hay algunos que son cortos, pero aun así los bordes o los marcos tienen el ancho de la entrada.
ResponderBorrarGracias.
uyyy, no sabría decirte Manuel :(
Borrar¡Hola Wendy! Me encantó el tutorial! Solo una pregunta, como puedo hacer que la línea sea más corta?
ResponderBorrar¡Muchas gracias!
M.
¡Hola Aina! La linea se ajusta al ancho de la entrada asi que no se puede hacer más cortita :(
BorrarHolaaa, ¡Este post me ha ayudado muchísimo con distintos blogs que he creado! Pero, me gustaría saber, ¿cómo hago para eliminar el código en caso de que ya no quiera tener mi título así? Agradecería mucho que respondieras♥
ResponderBorrarBesos.
¡Hola Daniela! para eliminar el estilo de los títulos pues debes de ir a la plantilla de HTML y eliminar el código que habías pegado.
BorrarGracias por tus comentarios