Crear una página de pantalla completa barra de noticias con css y rss widgets

Cuando eres un blogger, es muy importante mantenerse al día con las últimas noticias en su nicho particular. Las personas que toman más en serio cuando usted es uno de los primeros en cubrir un acontecimiento importante - más aún si se cubre antes de que el gran principales medios de comunicación, incluso se entera de ella.

Si usted es una Noticias blogger, la importancia de mantenerse al día sobre las últimas noticias es aún más crítica. Desde que comenzó a cubrir más eventos relacionados con noticias en mi propio blog, me di cuenta de lo importante que era para un seguimiento constante de noticias en tiempo real. Desde que el uso de dos pantallas con mi portátil, me di cuenta que se podían instalar una pantalla para que sea exclusivamente para la transmisión de tickers de noticias entrantes.

El único problema es que si bien existen aplicaciones dignas para la transmisión de las líneas individuales de noticias, como Yahoo Widgets o GlowDart, esas pantallas, ya sea cubierta sólo una muy pequeña corriente de texto entrante, o que son difíciles de personalizar a mirar exactamente de la manera que desee en una especie de pantalla completa de modo.

Creación de su propia página completa noticias en tiempo real de visualización

Para resolver este problema, me di cuenta de que iba a tener que construir algo a mí mismo. Ya que realmente no quería tomar el tiempo para escribir una aplicación completa, decidí crear una página web con los flujos RSS embebidos. Podría mostrar esa página al abrir el navegador en modo de pantalla completa.

Las herramientas que he utilizado para crear esta página, y todo lo que necesita para crear su propia, es una plantilla de página web basado en CSS libre (he elegido el modelo del asunto gratuito creado por SliceJack), y una cuenta de Google para acceder a Google Web Elements y alertas de Google.

Esto es lo que la plantilla de presentación predeterminada por SliceJack parecía antes de que empecé a cortar encima del código de fondo.

barra de noticias

Vídeo: Tutorial - Cómo crear una Social Bar con HTML y CSS

Este es mi método favorito para crear páginas web, lo admito - No me gusta volver a inventar la rueda. Esta página no tiene todos los elementos que quiero integrar en mi página de noticias de streaming de final.

Los dos elementos en la parte superior - el artículo principal y la imagen - que voy a eliminar. Lo que realmente quiero usar son las tres columnas en el centro de la página.

barra de noticias libre

Al descargar la plantilla a su propia computadora, se encuentra el archivo index.html en la carpeta principal, pero luego Css archivos en una carpeta de hojas de estilo. Visualización del archivo index.html, por lo general es bastante simple para encontrar las secciones que desee modificar. En este caso, estoy editando la barra superior para mostrar “Mis noticias”Y el cambio de los enlaces del menú a diferentes categorías que voy a crear páginas de noticias adicionales para.

Vídeo: #08 Crear galería de imágenes a pantalla completa

barra de noticias libre

Generalmente, usted puede encontrar las secciones de la página mediante la búsqueda de la

las etiquetas. El “id =” parámetro que indica qué elemento CSS se utiliza para definir el formato. Sin embargo, en este caso, sólo voy a acabar con toda la sección definida por “
. Realmente es tan fácil como la supresión de la sección de la página.

La siguiente cosa que quiero hacer a la plantilla es cambiar la columna de la derecha de la barra lateral a un servicio de noticias de streaming de YouTube. En primer lugar, identificar la sección que desea reemplazar con el

etiquetas de nuevo. He encontrado la sección de barra lateral derecha dentro de la “barra lateral” etiqueta div.

barra de noticias libre

No me gusta el color de esa sección (es gris y se vería tonto con un vídeo en blanco en su interior), así que tengo que cambiarlo a blanco. Encuentra el archivo principal de CSS y la búsqueda de la identidad. He encontrado “barra lateral” dentro de main.css, y el fondo se establece en #FFF. Para cambiar a blanco, he hecho este # 000.

escritorio barra de noticias

Incorporación de widgets en su página personalizada

Ahora viene la parte divertida. Una vez que usted tiene el derecho de formato, puede empezar a incrustar en streaming alimenta en su página. Lo primero que quiero hacer es incrustar el elemento de YouTube [YA NO FUNCIONA] Elementos web de Google.

escritorio barra de noticias

Sólo tiene que seleccionar la fuente de noticias que desea y luego copiar y pegar el código. De hecho, se podría construir su página entera Noticias en tiempo real con sólo Google Web Elements utilizando el elemento de Google Reader. Sin embargo, quiero mostrar cómo muchas fuentes están disponibles para actualizaciones en tiempo real. Antes de seguir, sin duda asegurarse de agarrar el elemento Noticias Google, y copiar y pegar el código en su página también.

escritorio barra de noticias

Otro gran recurso para obtener noticias vía RSS es FeedWind. Me gusta mucho, ya que sólo pegar en el alimento que desee, personalizar, y le da un widget agradable y limpio que se puede integrar directamente en su página.

Además, si usted va a ser el seguimiento de las noticias dentro de un nicho determinado, no se puede olvidar de controlar la búsqueda de Google dentro de ese nicho. Dentro de las alertas de Google, simplemente seleccione “Feed” en el campo “entregar a”.

A continuación, puede utilizar esa URL del feed en FeedWind para crear el widget de Google Resultados de la búsqueda. Ahora que todas estas diferentes fuentes de noticias están incrustados en la página - visualización de las noticias está finalmente terminado la transmisión en tiempo real. El menú superior le permite crear múltiples páginas como ésta, con los widgets que aportan las fuentes de noticias dirigidas.

barra de noticias

Y hacerlo es muy fácil ahora que tienes la primera página principal hecho. Como se puede ver, el uso de la plantilla CSS proporciona una buena página con formato en el que sólo puede insertar sus feeds diversas noticias para una buena página completa visualización de las noticias en tiempo real.

Esto es mejor que la mayoría de las aplicaciones de streaming barra de noticias que puede encontrar en cualquier lugar de forma gratuita, y también le permite personalizar exactamente a sus necesidades - que es la belleza de la utilización de una página web en lugar de una aplicación.

¿Ha creado su propia página junto con este artículo? ¿Te han colgado en cualquier lugar, o descubrir otras fuentes frescas para transmisión en tiempo real widgets de noticias? Compartir sus puntos de vista en la sección de comentarios.

Artículos Relacionados