Estaba navegando por internet y de repente doy con un magnífico blog de origen inglés, el cual posee algo que considero una curiosidad bien original, y no solo la posee, sino que le cuenta al mundo cómo lograrla, me refiero a Blog.SpoonGraphics.
La curiosidad es respecto a su contador RSS, si entras te darás cuenta a lo que estoy haciendo mención. He visto varios ejemplos hechos en javascript de ventanas flotantes o tooltips, como comúnmente se les conoce, por lo que me he decidido a hacer este post. El objetivo es bien desafiante, ya que la meta es que, en tu sitio, cada vez que alguien se sitúe sobre el contador RSS, le aparezca una ventana flotante con el resultado real de la cantidad de suscriptores. Haciendo uso de la magia simple y sencilla, pero extrema, de jQuery y de PHP síguele los pasos a esta guía y gozarás de un contador RSS bien original.
Ellos, como una gran cantidad creciente de personas alrededor de internet, han usado en varias ocasiones jQuery, esta vez se centraron en un script, según ellos, con una fácil implementación; ya veremos.
Aprender jQuery es algo que definitivamente tengo planeado para un futuro no muy lejano. No obstante, para los novatos de javascript como yo, existen descargas disponibles, como lo es el tutorial Simplest jQuery Tooltip Ever del sitio CSS Globe. Descarga el paquete de CSS Globe o crea un nuevo archivo javascript desde el código fuente expuesto en el demo. Además tendrás que descargar la última versión de jQuery.
Sitúa los dos archivos en un directorio relevante de la estructura de tu sitio, usando Wordpress debemos guardarlos en el directorio “js” del mismo o del theme en caso de que se esté usando uno. Referencia los dos archivos en el <head> de tu sitio, los usuarios de Wordpress deben hacerlo modificando el archivo header.php:
<script src="http://www.blog.spoongraphics.co.uk/wp-content/themes/SpoonGraphics_V3/js/jquery-latest.pack.js" type="text/javascript"></script>
<script src="http://www.blog.spoongraphics.co.uk/wp-content/themes/SpoonGraphics_V3/js/jquery-tooltip.js" type="text/javascript"></script>
Además, pega el CSS proveído por CSS Globe en tu hoja de estilos.
Lo siguiente es generar el conteo de feeds. Si todavía no usas Feedburner para gestionar tus RSS simplemente créate una cuenta. Haciendo uso de un excelente tutorial de 45n5.com, podemos copiar el código PHP y pegarlo en nuestro <header>, poniendo tu propio ID de Feedburner dentro de ‘uri=’.
Modifica el vínculo de tu RSS adicionando class="tooltip" para integrarlo con el script jQuery. El texto actual presentado en la ventana flotante se pone en una pequeña pestaña, gestiona el conteo del feed con las palabras ‘Subscriptores’ o ‘Lectores’ quedando así:
title="<?php echo $fb;?> Subscriptores"
El vínculo en general debería verse así:
<a class="tooltip" title="=" href="http://feeds.feedburner.com/Nombre-de-tu-feed"> Subscriptores"><img src="Tu-icono-RSS.jpg" alt="Suscribirte por RSS" /></a>
Para darle un toque final a la ventana flotante, crea un fondo transparente que será el que se mostrará cuando te sitúes encima del ocntador RSS. En Adobe Photoshop, crea un documento de 178×46px , dibuja un rectángulo redondeado en las esquinas, llénalo con un color de tu preferencia y proporciónale una opacidad de 60%. Ve a Archivo > Guardar como y posteriormente selecciona el formato PNG.
Edita la hoja de estilos para que coincida con tu sitio, y referencia el archivo PNG en el CSS. Un ejemplo sería este:
#tooltip {
position: absolute;
padding: 10px;
display: none;
font-family: "Times New Roman", Times, serif;
font-size: 22px;
font-style: italic;
font-weight: bold;
color: #707070;
background: url(images/nombre-de-tu-archivo.png) no-repeat;
}
Sube los archivos y prueba. Ahora bien, todos sabemos que Internet Explorer 6 no acepta ni entiende de archivos PNG con transparencia alfa, si estás en la necesidad de usar este prehistórico navegador, no te olvides de instalarte el IE6 PNG Fix.
[Vía Blog.Spoongraphics]
Deja tu respuesta