02 abril 2011

Agregar últimos comentarios usando el feed, y personalizarlos con icono de persona



En la entrada pasada les mostraba la forma de añadir viñetas y estilos a la lista de enlaces de las etiquetas, considerando que son listas, ahora haremos algo similar, solo que usaremos un ícono,  cosa que también es muy rápida de implementar en su blog;  ahora, ya tienen trabajo para este fin de semana :)

Este truquillo de usar los últimos comentarios usando el feed, hace mucho lo uso en mi blog, aunque no le había agregado el ícono de persona, pero como ya estoy más animada a hacer cambios con mi nueva plantilla, hoy lo hice, y creo que a alguien le puede servir y gustar.

Yo aprendí a usar los feeds para mostrar los comentarios con Rosa, (que en paz descanse) es una manera muy sencilla y práctica de  mostrar los últimos comentarios en el blog, (además de las últimas entradas) ya que no habrá necesidad de usar ningún script.

Lo único que haremos nosotros es, colocar un icono de persona, para que se identifiquen los comentarios como tal, y eso, lo vamos a lograr muy fácil, ya que utilizaremos una propiedad de CSS llamada list-style-image para usar el ícono de persona, ya que los últimos comentarios se muestran en forma de lista.

La demostración, la puedes ver ahora mismo en mi blog.

Entonces, empecemos...

Paso 1. Ve a diseño►Elementos de la página►Agregar gadget, y elige la opción del Feed


 Luego dentro del campo, vas a escribir el enlace necesario para que se lean los los últimos comentarios del blog, que es este...

http://mi_blog.blogspot.com/feeds/comments/default

...en donde dice mi_blog escribe el nombre de tu blog.

...luego, ahí mismo, le pones el título que más te guste al widget, y selecciona las opciones que te presenta a tu gusto.


 Paso 2. Guarda los cambios

Ahora  los últimos comentarios se mostrarán en tu blog, y cada uno de ellos tendrá viñeta, entonces lo que haremos, es cambiar esa viñeta por una imagen que será nuestro ícono, también agregaremos algunos estilos para resaltar ese widget.

Paso 3. Ve a Diseño►Diseñador de plantillas►Avanzado►Añadir CSS y escribimos en el campo correspondiente el código CSS para personalizar el widget de los últimos comentarios que es este: (puedes personalizarlos según tus gustos y necesidades siguiendo las indicaciones que estan entre /*...*/, también, si es tu segundo widget de feed que usas será #Feed2, o si es el tercero #Feed3 etc. y deberás cambiarlo en el código)
/* Estilos para los últimos comentarios */
#Feed1 ul li{
/* aqui ponemos la imagen del icono */
margin: 0;
padding: 0 0 0 2px;
list-style-image: url(http://2.bp.blogspot.com/-Fpi6kXzDHKs/TZc-2lGypUI/AAAAAAAAFUs/VHdrdeD41HQ/s400/icono_de_persona.gif ); 
line-height: 1.1em;
}
#Feed1 li{
margin:0;
padding:0;
}
#Feed1 li a{
color: #241802; /* este es el color de la letra de los enlaces de los comentarios */
font-size: 16px;/* este es el tamaño de la letra de los enlaces de los comentarios */
padding:0;
margin:0;
text-decoration: none;
}
#Feed1 li a:hover {
color: inherit; /* aqui pones el color del enlace del comentario al poner el puntero arriba */
font-weight: normal; /* si en lugar de normal pones bold la letra se verá negrita al poner el puntero del ratón encima */
}

Paso 4. Desde ahí puedes ver los cambios aplicados, una vez que te gusten los resultados, guarda los cambios en APLICAR AL BLOG.

Nota: Recuerda ubicarte después de }, por ejemplo y dar click a la tecla enter, para que se lea el código que agregaste, ya que al pegar contenido en ese campo, no se interpreta.

En el código anterior, he puesto el ícono que yo uso, pero, puedes escoger entre estos (los dos con fondo transparente)
Si ninguno de ellos te cierra el ojo, puedes encontrar miles de íconos de personas aquí; también si lo prefieres, puedes usar una burbuja como imagen.

Nota: Recuerda guardar en tu propio servidor la imagen del ícono de los cometarios, por ejemplo en blogger o photobucket.

Referencias
Para leer más sobre la propiedad list-style-image, puede visitar esta página.
El icono azul que uso, me lo trajé de www.webdesign.org


Muy fácil y mono ¿verdad?

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.