Como personalizar el Titulo de entradas en Blogger
martes, marzo 24, 2015
Ya hace algunos días que estaba desconectada del mundo de Internet, aquí en california oficialmente iniciaron las vacaciones de Spring Break (Vacaciones de Primavera o Semana Santa) y como mis hijos ahora mismo se encuentran en casita, pues andaré un poco mas ausente, tengo que pasar un poco de tiempo mas con ellos, pero seguiré por aquí compartiendo contigo, hoy he querido traerte dos pequeños tutoriales, son super fácil de implementar pero con estos pequeños cambios lograremos que nuestros Blog queden un paso mas chulo.
Hoy me voy a enfocar en el titulo de las entradas, hay muchísimas cosas que podemos hacer con el titulo, como cambiarlo de posición, tamaño, agregar sombras, lineas etc, hoy te voy a enseñar como puedes poner una imagen de fondo, atrás del titulo o a un costado.
Te he dejado las imágenes que he utilizado para este tutorial por si te gustan puedes copiar la url de cada imagen o descargarlas.
NOTA:estas imágenes son con fondo blanco, puedes hacerlas PNG con fondo transparente para que queden mejor con tu Blog.
Iniciemos con la imagen de Fondo, vamos a Platilla> Personalizar> Opciones Avanzadas>Agregar CSS
Y agregamos esto.
post-title{
background-image:url("URL");
background-repeat: no-repeat;
background-position: center;
background-position: center;
height: 60px;
padding-left: 20px;
padding-top: 20px;
}
El color mostaza es donde ira pegada la URL de la imagen que utilizaras,
background-repeat: no-repeat; es para que no se repita la imagen,
background-position: center; Es para que quede centrada la imagen, si no la queremos centrada borramos esta parte o podemos cambiar posicion a left y right
Lo marcado en azul determina los valores que le quieres dar a tu imagen.
Si quieres poner una imagen al lado del titulo, esto es lo que tienes que agregar al CSS
h3.post-title {
background: url("URL") top left no-repeat;
background-position: 295px;
height: 50px;
padding-left: 50px;
padding-top: 20px;
}
El color mostaza es donde ira pegada la URL de la imagen que utilizaras,
top left no-repeat; Para que no se repita la imagen.
background-position: 295px; Posicion donde quieres alineada la imagen, puedes tambien agregar center, right y left.
Lo marcado en azul determina los valores que le quieres dar a tu imagen.
Y listo es todo, te lo dije TODO super sencillo, verdad !
Cuéntame si planeas cambiar tu títulos de entradas por algo mas chachi !
Ciao,!
Taina!
3
¡Hola Taina!
ResponderEliminarHe puesto la CSS y no me sale nada. ¿Qué puedo hacer?
Has insertado la URL de la imagen que quieres poner?
ResponderEliminarSí, he copiado la URL de la imagen del circulo.
ResponderEliminar