Atractivo menu Rss con JavaScript

Ahora que el blog es bastante funcional, voy a empezar a meterle pequeños cambios para mejorarlo poco a poco.
El primero ha sido cambiar el sencillo botón de rss por uno creado mediante javascript con un menú desplegable.
El plugin que he usado es original de komodomedia y utiliza la genial librería JQuery.
Veamos paso a paso como incluirlo en nuestro blog wordpress o nuestra página web.

En primer lugar debemos bajar los archivos y localizarlos en alguna carpeta de wordpress, para ser ordenados deberíamos meterlos en la carpeta que wp trae para las bibliotecas javascript importadas: “/wp-includes/js”.
A continuación incluiremos las bibliotecas y enlazaremos al css dentro del archivo header de nuestro tema. En mi caso quedará así:

1
2
3
4

<script src="/blog/wp-includes/js/jquery_feed_menu/jquery.js" type="text/javascript"><!--mce:0--></script>
 
		<script src="/blog/wp-includes/js/jquery_feed_menu/feed_menu.js" type="text/javascript"><!--mce:1--></script>
		<script type="text/javascript"><!--mce:2--></script>

Modificar las urls para adecuarla a vuestro caso, pero aseguraros de que el código va justo antes de finalizar el head para que no entre en conflicto con otras importaciones.

Una vez tenemos todas las librerías, el código para usar los botones debe ir nada más empezar el body y dentro de un onload o un $(document).ready dado que usamos jQuery. El código quedaría así:

1

<script type="text/javascript"><!--mce:3--></script>

Dónde ‘atributo_css’ es el selector o atributo que contendrá el botón rss, por ejemplo: ‘contenedor_rss’.

1
2

En el css---> #contenedor_rss
En el html--->

Lo único que nos falta es añadir las lineas anteriores a nuestro css y la página en la que queremos mostrar los botones.

El plugin rastreará nuestro head en busca de todos los feeds que tengamos. Por defecto WordPress solo añade el rss en versión 2, pero podemos añadir todos los que queramos dentro del “head” por ejemplo:

1

<link rel="alternate" type="application/rss+xml" title="El blog" href="http://feeds.feedburner.com/Blog" />

Ya tenemos un bonito y útil botón con varios de nuestros feeds, podéis expresar cualquier duda en los comentarios.

Algunos ejemplos de su funcionamiento.

Descarga jquery y el menu rss.
Fuente: Komodomedia
Licencia: Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States.

Tags: javascript, js, menu, rss

Jueves, Mayo 28th, 2009 a las 15:59