Programo Web

Ya les había enseñado como mostrar las entradas de otro blog vía RSS (también lo vimos utilizando una aplicación de Google) y ahora veremos como hacer lo mismo, pero utilizando una de las opciones de FeedBurner (que la mayoría de Bloggers utilizamos).

Para empezar debemos loggearnos en FeedBurner (si no tienes una cuenta debes registrarte) y presionar en "Publicize".

Y ahora debemos entrar en "BuzzBoost".

Ahora debemos configurar como queremos que se vea nuestro Widget que tendrá las url de nuestro Blog. Estas son las opciones que nos muestra:

Ahora veamos para que sirve cada opción.

Feed Settings

• Number of items to dislay: seleccionamos un número, el cual será la cantidad de post a mostrar, en este caso 3.
• Open links in: New Window: abrir en una nueva ventana. Same Window: abrir en la misma ventana.

Feed Content to Display

• Display feed title (or provide your own): Mostrará el título que elijamos como link hacia tu Blog.
• Display favicon: mostrará nuestro favicon, siempre y cuando la imagen esté en la siguiente url: http://www.direccionurl.com/favicon.ico
• Display item author name: mostrará el nombre del autor del post.
• Display item content:
  • Item Content Format:
  • Plain Text: mostrará el "texto plano", es decir sin ningún tipo de enlaces ni estilos, como puede ser la negrita.
  • Plain Text Excerpt Length: cantidad de palabras que se mostrará como texto plano.
  • Full HTML: mostrará el texto con las etiquetas HTML funcionales, es decir, mostrará enlaces y negritas.
• Display item publication date:
  • Date format: elegimos el estilo de como se mostrará la fecha.
  • Date Location: lugar en el cual se mostrará la fecha. Above: antes de contenido. Below: debajo del contenido.
• Show linked media from a podcast: mostrará una url para ver o escuchar un podcast, pueden ser videos o archivos de sonido.
• Display link to feed: mostrará un enlace hacia tu Feed, el único problema es que lo muestra en Inglés.

Ahora solo presionamos Activate y nos brindará un código para mostrar el Feed.

Se verá de esta forma: ejemplo.

Ahora que tenemos listo nuestro Widget, podemos darle estilos CSS y acomodarlo al diseño de nuestro Blog.

En esta página nos enseñan como se forma este widget, y también nos muestra los "divs" y "class" que utilizan para darle CSS, que nosotros podemos editar.

La imágen que se muestra debajo de los post la podemos ocultar utilizando el siguiente código:

Podemos editar los titulos de esta forma, ya que se muestran utilizando la etiqueta "li":

Con esto mostraremos una imágen en vez del punto tradicional y se elimina el espacio que está antes de el.

El tamaño y estilo de las fuentes del contenido lo podemos editar de la siguiente forma:

Aquí elegimos como fuenta la Verdana y de 13 px de tamaño.

Dejense llevar por su imaginación

Espero que les sirva este pequeño tutorial, como a mí.

22/03/2009 CSS, Google, Herramientas, Tutoriales Imprimir

Twitter Menéame Delicious Technorati Bitácoras Facebook