Crea una pagina di visualizzazione di notizie a piena pagina con i CSS e i widget RSS

Se sei un blogger di notizie, l'importanza di rimanere aggiornati sulle ultime notizie è fondamentale. Da quando ho iniziato a riguardare più eventi legati alle notizie sul mio blog, mi sono reso conto di quanto fosse importante monitorare costantemente le notizie in tempo reale.

Se sei un blogger di notizie, l'importanza di rimanere aggiornati sulle ultime notizie è fondamentale.  Da quando ho iniziato a riguardare più eventi legati alle notizie sul mio blog, mi sono reso conto di quanto fosse importante monitorare costantemente le notizie in tempo reale.
Annuncio pubblicitario

ticker delle notizie Quando sei un blogger, è davvero importante stare al passo con le ultime novità all'interno della tua nicchia. Le persone ti prendono più sul serio quando sei uno dei primi a coprire un evento significativo - ancora di più se lo copri prima che i principali media mainstream ne prendano persino il sopravvento.

Se sei un blogger di notizie, l'importanza di rimanere aggiornati sulle ultime notizie è ancora più importante. Da quando ho iniziato a riguardare più eventi legati alle notizie sul mio blog, mi sono reso conto di quanto fosse importante monitorare costantemente le notizie in tempo reale. Dal momento che utilizzo due schermi con il mio portatile, mi sono reso conto che avrei potuto configurare uno schermo esclusivamente per lo streaming dei notiziari in entrata.

L'unico problema è che mentre ci sono applicazioni decenti per lo streaming di singole linee di notizie, come Yahoo Widgets o GlowDart, queste visualizzazioni coprono solo un flusso molto piccolo di testo in arrivo, oppure sono difficili da personalizzare per apparire esattamente come vuoi una sorta di modalità a schermo intero.

Creazione di una visualizzazione di notizie in tempo reale a piena pagina

Per risolvere questo problema, mi sono reso conto che avrei dovuto costruire qualcosa da solo. Dal momento che non volevo prendermi il tempo per scrivere un'intera applicazione, ho deciso di creare una pagina web con i flussi RSS incorporati. Potrei visualizzare quella pagina aprendo il mio browser in modalità a schermo intero.

Gli strumenti che ho usato per creare questa pagina e tutto ciò che serve per crearne uno sono un modello di pagina web gratuito basato su CSS (ho scelto il modello di business gratuito creato da SliceJack) e un account Google per l'accesso a Google Web Elements e Google Alert.

Ecco come appariva il modello di business predefinito di SliceJack prima che iniziassi con l'hacking del codice di background.

ticker delle notizie

Questo è il mio metodo preferito per creare pagine web, lo ammetto - odio reinventare la ruota. Questa pagina contiene tutti gli elementi che voglio integrare nella mia ultima pagina web di streaming di notizie.

I due elementi in alto - l'articolo principale e l'immagine - Vado a cancellare. Quello che voglio veramente usare sono le tre colonne al centro della pagina.

ticker delle notizie gratuite

Quando scarichi il modello sul tuo computer, troverai il file index.html nella cartella principale, ma i file .css in una cartella stylesheets. Visualizzando il file index.html, di solito è piuttosto semplice trovare le sezioni che si desidera modificare. In questo caso, sto modificando la barra in alto per visualizzare "Le mie notizie " e cambiando i collegamenti del menu a diverse categorie per le quali creerò ulteriori pagine di notizie.

ticker delle notizie gratuite

Di solito puoi trovare le sezioni della pagina cercando i tag. Il parametro "id =" ti dice quale elemento CSS viene utilizzato per definire la formattazione. Tuttavia, in questo caso ho intenzione di cancellare l'intera sezione definita da ". È davvero facile come cancellare la sezione dalla pagina.

La prossima cosa che voglio fare al modello è cambiare la colonna della barra laterale destra in un feed di notizie in streaming da YouTube. Innanzitutto, identifica nuovamente la sezione che desideri sostituire con i tag. Ho trovato la sezione della barra laterale destra all'interno del tag div "sidebar".

ticker delle notizie gratuite

Non mi piace il colore di quella sezione (è grigio e sembrerebbe stupido con dentro un video bianco), quindi devo cambiarlo in bianco. Trova il file css principale e cerca l'ID. Ho trovato la "barra laterale" all'interno di main.css e lo sfondo impostato su #FFF. Per passare al bianco, ho fatto questo # 000.

ticker delle notizie sul desktop

Incorporare i widget nella tua pagina personalizzata

Adesso per la parte divertente. Una volta ottenuta la formattazione, puoi iniziare a incorporare i feed di streaming nella tua pagina. La prima cosa che voglio fare è incorporare l'elemento YouTube da [NO LONGER WORKS] Google Web Elements.

ticker delle notizie sul desktop

Basta selezionare la fonte delle notizie che si desidera e quindi copiare e incollare il codice. Infatti, puoi creare l'intera pagina delle notizie di streaming con solo Google Web Elements utilizzando l'elemento Google Reader. Tuttavia, voglio mostrare solo quante fonti sono disponibili per gli aggiornamenti in tempo reale. Prima di proseguire, assicurati di prendere l'elemento Google News e copia e incolla il codice nella tua pagina.

ticker delle notizie sul desktop

Un'altra grande risorsa per ottenere feed di notizie via RSS è FeedWind. Mi piace molto perché basta incollare il feed che vuoi, personalizzare e ti dà un widget bello e pulito che puoi incorporare direttamente nella tua pagina.

Crea una pagina completa di News Ticker Display con CSS & RSS Widget newsticker9

Inoltre, se stai monitorando le notizie all'interno di una determinata nicchia, non puoi dimenticare di monitorare la ricerca Google all'interno di quella nicchia. All'interno di Google Alert, seleziona "Feed" nel campo "Consegna a".

Crea una pagina completa di News Ticker Display con CSS & RSS Widget newsticker10

Quindi, puoi utilizzare l'URL del feed in FeedWind per creare il widget dei risultati della Ricerca Google. Ora che tutte queste diverse fonti di notizie sono incorporate nella pagina, il display delle notizie in tempo reale è finalmente pronto. Il menu principale ti consente di creare più pagine come questa, con widget che portano a fonti di notizie mirate.

ticker delle notizie

E farlo è facile ora che hai fatto la prima pagina principale. Come puoi vedere, l'uso del modello CSS fornisce una bella pagina formattata in cui puoi semplicemente inserire i tuoi vari feed di notizie per una bella visualizzazione di notizie in tempo reale a piena pagina.

Questo è migliore della maggior parte delle app di news ticker di streaming che troverai ovunque gratuitamente e ti consente anche di personalizzarle esattamente in base alle tue esigenze: questa è la bellezza dell'utilizzo di una pagina web piuttosto che di un'app.

Hai creato la tua pagina insieme a questo articolo? Ti sei appeso ovunque o hai scoperto altre fonti interessanti per i widget di notizie in tempo reale? Condividi i tuoi approfondimenti nella sezione commenti qui sotto.

Credito d'immagine: ShutterStock

In this article