Skapa en helhetssidesnyheter med CSS- och RSS-widgetar

Annons

När du är en bloggare är det verkligen viktigt att hålla sig uppdaterad med de senaste nyheterna inom din specifika nisch. Människor tar dig mer på allvar när du är en av de första som täcker en betydande händelse - ännu mer om du täcker det innan de stora mainstream-medierna till och med fångar det.

Om du är en Nyheter bloggare, vikten av att hålla sig uppdaterad om nyheter är ännu viktigare. Ända sedan jag började täcka fler nyhetsrelaterade händelser på min egen blogg, insåg jag hur viktigt det var att ständigt övervaka realtidsnyheter. Eftersom jag använder två skärmar med min bärbara dator, insåg jag att jag kunde ställa in en skärm för att uteslutande vara för att strömma inkommande nyheter tickers.

Det enda problemet är att även om det finns anständiga appar för att strömma enstaka nyheter, som Yahoo Widgets eller GlowDart, visar dessa antingen täcker bara en mycket liten ström av inkommande text, eller så är de svåra att anpassa för att se exakt ut som du vill i en fullskärms sort av läge.

Skapa din egen hemsida i realtid Nyhetsdisplay

För att lösa detta problem insåg jag att jag skulle behöva bygga något själv. Eftersom jag verkligen inte ville ta sig tid att skriva en hel applikation, bestämde jag mig för att skapa en webbsida med de inbäddade RSS-strömmarna. Jag kunde visa den sidan genom att öppna min webbläsare i helskärmsläge.

Verktygen som jag använde för att skapa den här sidan, och allt du behöver för att skapa din egen, är en gratis CSS-baserad webbsidesmall (jag valde den gratis affärsmall skapad av SliceJack) och ett Google-konto för åtkomst till Google Web Elements och Google Alerts.

Så här såg ut standardaffärsmallen från SliceJack ut innan jag kom igång med att hacka bakgrundskoden.

Det här är min favoritmetod för att skapa webbsidor, jag erkänner det - jag hatar att återuppfinna hjulet. Den här sidan har alla element som jag vill integrera i min slutliga nyhetsströmningssida.

De två elementen högst upp - huvudartikeln och bilden - jag kommer att ta bort. Vad jag verkligen vill använda är de tre kolumnerna i mitten av sidan.

När du laddar ner mallen till din egen dator hittar du filen index.html i huvudmappen, men sedan .css-filer i en stilarkmapp. När du tittar på filen index.html är det vanligtvis ganska enkelt att hitta de avsnitt som du vill ändra. I det här fallet redigerar jag den översta fältet för att visa "Mina nyheter"Och ändra menylänkar till olika kategorier som jag ska skapa ytterligare nyhetssidor för.

Du kan vanligtvis hitta sidans delar genom att leta efter

Nästa sak jag vill göra med mallen är att ändra den högra sidofältet till en strömmande nyhetsflöde från YouTube. Identifiera först det avsnitt du vill ersätta med

Jag gillar inte färgen på det avsnittet (det är grått och ser dumt ut med en vit video inuti den), så jag måste ändra den till vit. Hitta huvud-css-filen och sök efter ID. Jag hittade “sidofält” inuti main.css, och bakgrunden inställd på #FFF. För att byta till vitt gjorde jag det här # 000.

Bädda in widgets på din anpassade sida

Nu för den roliga delen. När du har formateringen rätt kan du börja bädda in strömningsflöden på din sida. Det första jag vill göra är att bädda in YouTube-elementet från [INGEN LÅNGARE ARBETE] Google Web Elements.

Du väljer bara källan till nyheter du vill och kopierar och klistrar sedan in koden. Du kan faktiskt bygga hela din nyhetssida för streaming med bara Google Web Elements med hjälp av Google Reader-elementet. Jag vill dock visa hur många källor som finns tillgängliga för realtidsuppdateringar. Innan du går vidare, se till att ta tag i Google News Element och kopiera och klistra in den koden också på din sida.

En annan stor resurs för att få nyhetsflöden via RSS är FeedWind Feed Wind: Generera en inbäddbar widget från RSS-flöden Läs mer . Jag gillar det verkligen eftersom du bara klistrar in det flöde du vill, anpassa och det ger dig en fin, ren widget som du kan bädda in direkt på din sida.

Om du kommer att övervaka nyheterna inom en viss nisch kan du inte glömma att övervaka Googles sökning inom den nischen. Inom Google-varningar, välj bara "Feed" i fältet "Deliver to".

Sedan kan du använda den inmatade webbadressen i FeedWind för att skapa din widget för Google-sökresultat. Nu när alla dessa olika nyhetskällor är inbäddade på sidan - är realtidens nyhetsdisplay äntligen klar. Den översta menyn låter dig skapa flera sidor som denna med widgetar som sätter in riktade nyhetskällor.

Och det är enkelt nu när du har gjort den första huvudsidan. Som du kan se, använder CSS-mallen en fin formaterad sida där du bara kan infoga dina olika nyhetsflöden för en trevlig nyhetsvisning i realtid.

Det här är bättre än de flesta av de streaming nyhets-ticker-apparna som du hittar någonstans gratis, och det också låter dig anpassa den exakt efter dina behov - det är skönheten med att använda en webbsida snarare än en app.

Skapade du din egen sida tillsammans med den här artikeln? Hängde du upp någonstans eller upptäckte några andra coola källor för realtidströmmande nyhetswidgets? Dela dina insikter i kommentarerna nedan.

Bildkredit: Shutterstock