Skapa en fullständig sida Nyheter Ticker Display med CSS & RSS Widgets

Skapa en fullständig sida Nyheter Ticker Display med CSS & RSS Widgets / internet

När du är en bloggare är det väldigt viktigt att hålla dig uppdaterad med de senaste nyheterna inom din nisch. Människor tar dig mer allvarligt när du är en av de första som täcker en betydande händelse - ännu mer om du täcker den innan de stora vanliga medierna även hämtar vinden.

Om du är en Nyheter bloggare, vikten av att hålla sig uppdaterad om att bryta nyheter är ännu mer kritisk. Ända sedan jag började täcka mer 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 vara uteslutande för att strömmande inkommande nyhetsmarkörer.

Det enda problemet är att medan det finns anständiga appar för att strömmande enskilda rader av nyheter, som Yahoo Widgets eller GlowDart, visar de antingen omslaget bara en mycket liten ström av inkommande text, eller de är svåra att anpassa för att se exakt hur du vill ha en helskärm sorts läge.

Skapa din egen fullständiga sida i realtidsnyhetsdisplayen

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 tid att skriva en hel ansökan, bestämde jag mig för att skapa en webbsida med de inbäddade RSS-flödena. Jag kunde visa den sidan genom att öppna min webbläsare i helskärmsläge.

De verktyg som jag använde för att skapa denna sida och allt du behöver för att skapa din egen är en gratis CSS-baserad webbsidemall (jag valde den gratis företagsmallen skapad av SliceJack) och ett Google-konto för åtkomst till Google Web Elements och Google Alerts.

Det här är hur Standard Business Template av SliceJack såg ut innan jag började hacka upp bakgrundskoden.

Detta är min favorit metod för att skapa webbsidor, jag erkänner det - jag hatar återuppfinna hjulet. Den här sidan har alla de element som jag vill integrera i min sista nyhetsströmmande webbsida.

De två elementen på toppen - huvudartikeln och bilden - jag ska ta bort. Vad jag verkligen vill använda är de tre kolumnerna i mitten av sidan.

När du hämtar mallen till din egen dator hittar du index.html-filen i huvudmappen, men sedan .css-filer i en stylesheets-mapp. Om du tittar på index.html-filen är det vanligtvis ganska enkelt att hitta de avsnitt som du vill ändra. I det här fallet redigerar jag den övre fältet som ska visas “Mina nyheter” och byter meny länkar till olika kategorier som jag kommer att skapa ytterligare nyhetssidor för.

Du kan vanligtvis hitta sektionerna på sidan genom att leta efter

taggar. De “id =” parameteren berättar vilken CSS-element som används för att definiera formateringen. Men i det här fallet kommer jag bara att radera hela avsnittet definierat av “
. Det är verkligen lika enkelt som att bara radera sektionen från sidan.

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

taggar igen. Jag hittade rätt sidofält sektion i “sidofältet” div tagg.

Jag gillar inte färgen på den sektionen (den är grå och skulle se dum ut med en vit video inuti den), så jag måste byta den till vit. Hitta huvudcss-filen och sök efter ID-numret. jag hittade “sidofältet” inuti main.css och bakgrunden satt till #FFF. För att ändra till vit gjorde jag detta # 000.

Inbäddning av widgets till din anpassade sida

Nu för den roliga delen. När du har formateringen rätt kan du börja integrera strömmande flöden i din sida. Det första jag vill göra är att bädda in YouTube-elementet från [NO LONGER WORKS] Google Web Elements.

Du väljer bara den nyhetskälla du vill ha och sedan kopiera och klistra in koden. Faktum är att du kan bygga hela din strömmande nyhetssida med bara Google Web Elements med hjälp av elementet Google Reader. Jag vill dock visa hur många källor som är tillgängliga för uppdateringar i realtid. Innan du går vidare, var noga med att ta tag i Google News Element och kopiera och klistra in den här koden på din sida också.

En annan stor resurs att få nyhetsflöden via RSS är FeedWind. Jag tycker verkligen om det eftersom du bara klistrar in det flöde du vill ha, anpassa och det ger dig en fin, ren widget som du kan bädda in direkt i din sida.

Om du också kommer att övervaka nyheterna inom en viss nisch, kan du inte glömma att övervaka Google-sökning inom den nischen. Inom Google Alerts väljer du bara “Utfodra” i “Leverera till” fält.

Därefter kan du använda den aktuella 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 - visas realtidsströmmar på nyheterna äntligen. På toppmenyn kan du skapa flera sidor så här, med widgets som tar in riktade nyhetskällor.

Och det är enkelt nu att du har den första huvudsidan gjort. Som du kan se, använder CSS-mallen en bra formaterad sida där du bara kan sätta in dina olika nyhetsflöden för en fin sida med realtid på heltid.

Det här är bättre än de flesta av de streaming-nyheter-tickerapparna som du hittar överallt gratis och det gör det också möjligt att anpassa det exakt till dina behov - det är skönheten att använda en webbsida i stället för en app.

Skapade du din egen sida tillsammans med den här artikeln? Fick du hängde någonstans, eller upptäck några andra fina källor för realtidsströmmande nyhets widgets? Dela dina insikter i kommentarfältet nedan.

Bildkredit: ShutterStock

Utforska mer om: RSS.