Créer une page complète Ticker Display avec CSS et RSS Widgets

Si vous êtes un blogueur de nouvelles, l'importance de rester à jour sur les dernières nouvelles est critique. Depuis que j'ai commencé à couvrir plus d'événements liés à l'actualité sur mon propre blog, j'ai réalisé à quel point il était important de surveiller constamment les nouvelles en temps réel.

Si vous êtes un blogueur de nouvelles, l'importance de rester à jour sur les dernières nouvelles est critique.  Depuis que j'ai commencé à couvrir plus d'événements liés à l'actualité sur mon propre blog, j'ai réalisé à quel point il était important de surveiller constamment les nouvelles en temps réel.
Publicité

news ticker Lorsque vous êtes un blogueur, il est vraiment important de rester à jour avec les dernières nouvelles dans votre créneau particulier. Les gens vous prennent plus au sérieux lorsque vous êtes l'un des premiers à couvrir un événement important - d'autant plus si vous le couvrez avant que les principaux médias traditionnels ne s'en aperçoivent.

Si vous êtes un blogueur de nouvelles, l'importance de rester à jour sur les dernières nouvelles est encore plus critique. Depuis que j'ai commencé à couvrir plus d'événements liés à l'actualité sur mon propre blog, j'ai réalisé à quel point il était important de surveiller constamment les nouvelles en temps réel. Depuis que j'utilise deux écrans avec mon ordinateur portable, je me suis rendu compte que je pouvais configurer un seul écran pour être diffusé en continu.

Le seul problème est que, bien qu'il existe des applications décentes pour diffuser des lignes d'informations uniques, comme Yahoo Widgets ou GlowDart, ces affichages ne couvrent qu'un très petit flux de texte entrant, ou sont difficiles à personnaliser pour être exactement comme vous le souhaitez. un genre de mode plein écran.

Création de votre propre affichage de nouvelles en temps réel

Pour résoudre ce problème, j'ai réalisé que je devrais construire quelque chose moi-même. Comme je ne voulais vraiment pas prendre le temps d'écrire une application complète, j'ai décidé de créer une page Web avec les flux RSS intégrés. Je pourrais afficher cette page en ouvrant mon navigateur en mode plein écran.

Les outils que j'ai utilisés pour créer cette page, et tout ce dont vous avez besoin pour créer la vôtre, est un modèle de page Web CSS gratuit (j'ai choisi le modèle d'entreprise gratuit créé par SliceJack) et un compte Google pour accéder à Google Web Elements et Alertes Google

Voici à quoi ressemblait le modèle métier par défaut de SliceJack avant de commencer à pirater le code d'arrière-plan.

news ticker

C'est ma méthode préférée pour créer des pages Web, je l'admets - je déteste réinventer la roue. Cette page contient tous les éléments que je souhaite intégrer dans ma dernière page Web de diffusion de nouvelles.

Les deux éléments en haut - l'article principal et l'image - je vais supprimer. Ce que je veux vraiment utiliser, ce sont les trois colonnes au centre de la page.

ticker gratuit de nouvelles

Lorsque vous téléchargez le modèle sur votre propre ordinateur, vous trouverez le fichier index.html dans le dossier principal, puis les fichiers .css dans un dossier de feuilles de style. En regardant le fichier index.html, il est généralement assez simple de trouver les sections que vous voulez modifier. Dans ce cas, je suis en train d'éditer la barre supérieure pour afficher " Mes nouvelles " et de changer les liens de menu vers différentes catégories pour lesquelles je vais créer des pages de nouvelles supplémentaires.

ticker gratuit de nouvelles

Vous pouvez généralement trouver les sections de la page en recherchant les tags. Le paramètre "id =" vous indique quel élément CSS est utilisé pour définir le formatage. Cependant, dans ce cas, je vais juste effacer toute la section définie par ". C'est aussi simple que de supprimer la section de la page.

La prochaine chose que je veux faire pour le modèle est de changer la colonne de la barre latérale droite à un flux de nouvelles en streaming à partir de YouTube. Commencez par identifier la section que vous souhaitez remplacer par les balises. J'ai trouvé la section latérale droite dans la balise div "sidebar".

ticker gratuit de nouvelles

Je n'aime pas la couleur de cette section (elle est grise et aurait l'air stupide avec une vidéo blanche à l'intérieur), donc je dois la changer en blanc. Trouvez le fichier css principal et recherchez l'ID. J'ai trouvé "sidebar" à l'intérieur de main.css, et l'arrière-plan défini à #FFF. Pour passer au blanc, j'ai fait ce # 000.

ticker de nouvelles de bureau

Intégration de widgets dans votre page personnalisée

Maintenant, pour la partie amusante. Une fois la mise en forme correctement effectuée, vous pouvez commencer à intégrer des flux de diffusion en continu dans votre page. La première chose que je veux faire est d'intégrer l'élément YouTube de [NO LONGER WORKS] Google Web Elements.

ticker de nouvelles de bureau

Vous sélectionnez simplement la source de nouvelles que vous voulez, puis copiez et collez le code. En fait, vous pouvez créer l'intégralité de votre page d'actualités en streaming avec Google Web Elements à l'aide de l'élément Google Reader. Cependant, je veux montrer combien de sources sont disponibles pour les mises à jour en temps réel. Avant de continuer, assurez-vous de récupérer l'élément Google Actualités, puis copiez et collez ce code dans votre page.

ticker de nouvelles de bureau

Une autre excellente ressource pour obtenir des flux de nouvelles via RSS est FeedWind. Je l'aime vraiment parce que vous collez juste dans le flux que vous voulez, personnalisez, et il vous donne un widget agréable et propre que vous pouvez intégrer directement dans votre page.

Créer une page complète Affichage de Ticker avec CSS & RSS Widgets newsticker9

Aussi, si vous allez surveiller les nouvelles dans une certaine niche, vous ne pouvez pas oublier de surveiller la recherche Google dans ce créneau. Dans Google Alertes, sélectionnez "Flux" dans le champ "Envoyer à".

Créer une page complète News Ticker Display avec CSS & RSS Widgets newsticker10

Ensuite, vous pouvez utiliser cette URL de flux dans FeedWind pour créer votre widget de résultats de recherche Google. Maintenant que toutes ces différentes sources d'informations sont intégrées dans la page, l'affichage des actualités en temps réel est enfin terminé. Le menu supérieur vous permet de créer plusieurs pages comme celle-ci, avec des widgets qui apportent des sources d'actualités ciblées.

news ticker

Et c'est facile maintenant que vous avez la première page principale faite. Comme vous pouvez le voir, l'utilisation du modèle CSS fournit une belle page formatée où vous pouvez simplement insérer vos différents flux de nouvelles pour un bon affichage de nouvelles en temps réel.

C'est mieux que la plupart des applications de télésurveillance de nouvelles que vous trouverez n'importe où gratuitement, et il vous permet également de le personnaliser exactement à vos besoins - c'est la beauté d'utiliser une page Web plutôt qu'une application.

Avez-vous créé votre propre page avec cet article? Avez-vous été raccroché n'importe où, ou avez-vous découvert d'autres sources intéressantes pour des widgets d'actualités en temps réel? Partagez vos idées dans la section des commentaires ci-dessous.

Crédit d'image: ShutterStock

In this article