[Tutorial] Colocar Imagen al titulo de las entradas.


Avatar de: robsten♥
Status: Escuchando Coldplay
Hoy Hice: un dibujo :3
Tema de la Entrada: Tutorial
Palabra: facil =)
Ultima Serie Vista: Ao no exorcit cap 6


Konichiwa! espero esten muy bien hoy vengo con un tutorial fácil, como colocar una imagen al titulo de cualquier entrada de nuestro blog, y luego que lo hagamos cada vez que creemos una entrada automáticamente mostrara la imagen ^^ vamos allá!.

1.- Nos vamos a Plantilla - Edicion HTML y con control+f buscamos "h3 post-title" o "h3" hasta que nos salga algo así:


h3.post-title {
  margin: 0;
  font: $(post.title.font);
}

2.- Luego añadimos al código lo que sombreare en Gris:


h3.post-title {
  margin: 0;
  font: $(post.title.font);
background: url("http://i43.tinypic.com/6sqcmd.jpg") top left no-repeat;
height: 40px;
padding-left: 50px;
padding-top: 6px;

}


*Naranja: es donde añadimos la dirección de la imagen que se mostrara en el titulo de la entrada.
*Rojo: allí especificamos el alto de la imagen, también podemos añadir otra linea con el ancho utilizando
-Width: 0px;- sustituyendo el 0 por el valor de su imagen.
*Azul: permite modificar la distancia entre la imagen y el texto para que no se ve montada varia depende se cada imagen.
*Nota: Siempre tengan en cuenta que si el ancho de la imagen es de 40px el espacio entre la imagen y el texto serán 10px mas es decir 50px.

Resultado del tutorial:


Tutorial originalmente hecho por mi.

Espero les sirva, lo practiquen, recuerden siempre: GUARDEN UNA COPIA DE SEGURIDAD DE SU PLANTILLA, todo esto para que no se les dañe.

*Comparte el Tuto
* Si lo haces porfa da credito o enlaza mi blog ^^
*GRACIAS!!


Nos leemos hasta un nuevo post ^^ Jane!

Comentarios

Entradas populares