6 nov. 2009

Iconos en los títulos de los post

Como ya gozo de buenos tiempos, y de mucho descanso (wiiiiii *-*) ahora tengo la facilidad de colocar estas entradas y de organizar un poco el blog.
Ahora les traigo cómo colocar imágenes en los títulos del post o entrada.
Si se fijan bien, mi blog en el post tiene una mariposa rosada.... quizás ustedes también quieren algo asi, para eso tienen que seguir los siguientes pasos!
1.- Deben tener el URL de su imagen, gif u icono.
2.- Ingresan a Diseño, editar plantilla HTML
Y buscan lo siguiente (no en todas las plantillas es igual, pero esto es en general)
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
color:$titlecolor;
}
3.- Añadimos la imagen en este lugar (se añade sólo lo que esta en color rojo):
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
background: url(url del icono) no-repeat 0 .5em; *en el 0.5 significa que podemos ajustar la altura aumentando o disminuyendo
padding-left: 20px; * aquí pueden cambiar la posición colocando right (derecha)y/o ajustar la distancia del icono al título.
}
Y eso seria todo! que lo disfruten!!!
--------------------------
ANEXO
Para aquellos que quieren seguir modificando el color, tamaño o fuente, deben agregar lo que esta en rojo:
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
font-family: "Century Gothic",Trebuchet MS,sans-serif;
font-size: 24px;
color:#000;
color:$titlecolor;
font-weight:normal;
Ahora si quieren que los estilos cambien al pasar el ratón o mouse, les dejo este ejemplo:
.post h3 strong, .post h3 a:hover {
color:$titlecolor;
color: #1B703A;
font-size: 24px;
}

3 comentarios:

  1. Hola !! Una pregunta ... sabes como quitar el espacio que hay entre gadgets ??? Me resulta incómodo ver taaanto espacio entre uno y otro T_T si me pudieras ayudar me harías muy feliz :) !! tu blog es hermoso y tiene temas realmente útiles ^^ muchas gracias por compartirlo :D

    ResponderEliminar
  2. holaaa me encanta tu blog!!y gracias x enseñarnos trucos para el blog!! pasa x el mio si quieres : http://staystrongdemika.blogspot.com.ar/ kisssssss

    ResponderEliminar
  3. chica mira yo siempre e querido que algun blog publicara mi nuevo blog se llama lemonade-mout.blogspot.com muchas grasias tu blog es fantastico

    ResponderEliminar

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
ir arriba