Poner un icono en la lista de Etiquetas (Categoría o Sección), Comentarios, Autor, etc.

|

Icono para la lista de Etiqueta (Categoría o Sección)
» Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues al final (antes de ]]></b:skin>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.

#Label1 li {
list-style:none;
padding-left: 18px;
background: transparent url(http://Aquí-la-dirección-del-icono) no-repeat center left;
}

Explicación:
- La lista de etiquetas están definidas con la clase Label1.
- La propiedad list-style, especifica el tipo de marcador de artículos de lista.
- La propiedad padding-left, describe cuanto espacio colocamos entre el borde izquierdo y el contenido.
- En el background, la url correspondiente al icono.
** Estos iconos tienen que ser: 16px por 16px.
** Terminando de leer este post, te proporciono 2 páginas de iconos.

Icono para los Comentarios
Es el mismo paso cuando agregas un icono a la lista de Etiqueta. En este caso he puesto dos códigos: en el primero el icono aparece al costado de la palabra comentario y el segundo un icono al lado del nombre del autor.

.post-comment-link {
padding-left:20px;
padding-top:5px;
background: url(http://Aqui-la-direccíón-del-icono) center left no-repeat;
}

#comments dl dt {
font-weight: bold;
font-style: italic;
margin-top: 35px;
padding: 1px 0 0 18px;
background: transparent url(http://Aquí-la-dirección-del-icono) top left no-repeat;
}

Icono para el Autor (Publicado por)
Es el mismo paso cuando agregas un icono a la lista de Etiqueta.

.post-author {
padding-left:20px;
padding-top:5px;
background: url(http://Aquí-la-dirección-del-icono) center left no-repeat;
}

Icono al costado de la palabra Etiqueta
Es el mismo paso cuando agregas un icono a la lista de Etiqueta.

.post-labels {
padding-left:20px;
padding-top:5px;
background: url(http://Aquí-la dirección-del-icono) center left no-repeat;
}

Páginas de Iconos
famfamfam
FreeIconsWeb

0 comentarios:

Publicar un comentario