Poner un icono o imagen a lado del título del post

Poner un icono o imagen a lado del título del post

Alberto Lozano 31 / julio / 2010 Blogger 4 comentarios    35 visitas
Publicidad

Quizá quieras que se vea diferente el titulo de tu post o entrada colocando un icono o imagen a lado como lo tengo yo, para ponerlo no es gran cosa se basa en edición CSS de nuestra plantilla de Blogger.

Primero nos vamos a Diseño > Edición de HTML y vamos a buscar lo siguiente: Nota: para buscar mas fácil los códigos apretamos Control + F.

.post h3 { margin:.25em 0 0; padding:0 0 4px; font-size:140%; font-weight:normal; line-height:1.4em; color:$titlecolor; }

Tal vez no será igual al de ustedes pero solo que empiece en ".post h3 {" Solo tenemos que agregar lo que está en rojo y eliminar lo que está en verde.

.post h3 { padding-left: 20px; background: url(URL DE TU IMAGEN) center left no-repeat; margin:.25em 0 0; padding:0 0 4px; font-size:140%; font-weight:normal; line-height:1.4em; color:$titlecolor; }

Ahora tenemos que cambiar lo siguiente: Donde dice padding-left: 20px; nos indica la distancia entre el título y el icono o imagen que en este caso tiene 20px ahí lo acomodan a su gusto.

Por default el icono se mostrara de lado izquierdo del título (padding-left), si lo queremos a la derecha solamente cambiamos left por right (padding-right).

Y por ultimo donde dice (URL DE TU IMAGEN) coloca el enlace de tu icono o imagen donde lo alojaste. Guardamos la plantilla y listo. 😛

Publicidad

4 Comentarios en 'Poner un icono o imagen a lado del título del post'

Deja tu comentario

  • Nombre:
    E-mail:
    URL: (opcional)