Crie uma exibição de página inteira de notícias com CSS e RSS Widgets

Se você é um blogueiro de notícias, a importância de manter-se atualizado sobre as últimas notícias é fundamental. Desde que comecei a cobrir mais eventos relacionados a notícias em meu próprio blog, percebi o quanto era importante monitorar constantemente as notícias em tempo real.

Se você é um blogueiro de notícias, a importância de manter-se atualizado sobre as últimas notícias é fundamental.  Desde que comecei a cobrir mais eventos relacionados a notícias em meu próprio blog, percebi o quanto era importante monitorar constantemente as notícias em tempo real.
Propaganda

ticker de notícias Quando você é um blogueiro, é muito importante manter-se atualizado com as notícias mais recentes em seu nicho específico. As pessoas levam você mais a sério quando você é um dos primeiros a cobrir um evento significativo - ainda mais se você cobri-lo antes mesmo de a grande mídia principal perceber.

Se você é um blogueiro de notícias, a importância de manter-se atualizado sobre as últimas notícias é ainda mais crítica. Desde que comecei a cobrir mais eventos relacionados a notícias em meu próprio blog, percebi o quanto era importante monitorar constantemente as notícias em tempo real. Como uso duas telas com o meu laptop, percebi que poderia configurar uma tela exclusivamente para o streaming de notícias recebidas.

O único problema é que, embora existam aplicativos decentes para streaming de linhas únicas de notícias, como o Yahoo Widgets ou o GlowDart, esses monitores cobrem apenas um fluxo muito pequeno de texto recebido ou são difíceis de personalizar para ficar exatamente como você deseja uma espécie de modo de tela cheia.

Criando seu próprio visor de notícias em tempo real em página inteira

Para resolver esse problema, percebi que teria que construir algo para mim mesmo. Como eu realmente não queria gastar tempo escrevendo um aplicativo inteiro, decidi criar uma página da Web com os fluxos RSS incorporados. Eu poderia exibir essa página abrindo meu navegador no modo de tela inteira.

As ferramentas que usei para criar essa página e tudo o que você precisa para criar a sua própria, é um modelo de página da Web gratuito baseado em CSS (escolhi o modelo de negócios gratuito criado pelo SliceJack) e uma conta do Google para acesso ao Google Web Elements e Alertas do Google.

Aqui está o que o modelo de negócios padrão do SliceJack parecia antes de eu começar a hackear o código de fundo.

ticker de notícias

Este é o meu método favorito para criar páginas web, admito - odeio reinventar a roda. Esta página tem todos os elementos que quero integrar na minha página final de streaming de notícias.

Os dois elementos no topo - o artigo principal e a foto - eu vou deletar. O que eu realmente quero usar são as três colunas no centro da página.

ticker de notícias gratuito

Quando você baixar o modelo para o seu próprio computador, você encontrará o arquivo index.html na pasta principal, mas, em seguida, os arquivos .css em uma pasta de folhas de estilo. Visualizando o arquivo index.html, geralmente é bem simples encontrar as seções que você deseja modificar. Neste caso, estou editando a barra superior para exibir “ Minhas Notícias ” e alterando os links de menu para diferentes categorias para as quais vou criar novas páginas de notícias.

ticker de notícias gratuito

Geralmente, você pode encontrar as seções da página procurando pelas tags. O parâmetro "id =" informa qual elemento CSS é usado para definir a formatação. No entanto, neste caso, vou apagar toda a seção definida por “. É realmente tão fácil quanto simplesmente excluir a seção da página.

A próxima coisa que quero fazer no modelo é alterar a coluna da barra lateral direita para um feed de notícias de streaming do YouTube. Primeiro, identifique a seção que você deseja substituir com as tags novamente. Encontrei a seção da barra lateral direita na tag div da "barra lateral".

ticker de notícias gratuito

Eu não gosto da cor dessa seção (é cinza e pareceria bobo com um vídeo branco dentro dela), então eu tenho que mudar para branco. Encontre o arquivo css principal e procure o ID. Eu encontrei "sidebar" dentro main.css, e o fundo definido como #FFF. Para mudar para branco, fiz este # 000.

ticker de notícias no desktop

Incorporando widgets à sua página personalizada

Agora a parte divertida. Depois de ter a formatação correta, você pode começar a incorporar feeds de streaming na sua página. A primeira coisa que quero fazer é incorporar o elemento do YouTube dos elementos da Web do Google [NO LONGER WORKS].

ticker de notícias no desktop

Basta selecionar a fonte de notícias desejada e, em seguida, copiar e colar o código. Na verdade, você pode criar toda a sua página de notícias de streaming apenas com o Google Web Elements usando o elemento Google Reader. No entanto, quero mostrar quantas fontes estão disponíveis para atualizações em tempo real. Antes de prosseguir, certifique-se de pegar o Elemento do Google Notícias e copie e cole esse código na sua página também.

ticker de notícias no desktop

Outro excelente recurso para obter feeds de notícias via RSS é o FeedWind. Eu realmente gosto porque você acabou de colar o feed que você quer, personalizar, e dá-lhe um widget agradável e limpo que você pode inserir diretamente na sua página.

Criar uma tela de notícias de página inteira com CSS & RSS Widgets newsticker9

Além disso, se você estiver monitorando as notícias dentro de um determinado nicho, não se esqueça de monitorar a pesquisa do Google nesse nicho. Nos Alertas do Google, basta selecionar "Feed" no campo "Entregar para".

Criar uma exibição de página inteira de notícias com CSS e RSS Widgets newsticker10

Em seguida, você pode usar esse URL de feed no FeedWind para criar seu widget de resultados da Pesquisa do Google. Agora que todas essas diferentes fontes de notícias estão embutidas na página - a exibição de notícias de streaming em tempo real está finalmente finalizada. O menu principal permite criar várias páginas como esta, com widgets que trazem fontes de notícias segmentadas.

ticker de notícias

E fazer isso é fácil agora que você fez a primeira página principal. Como você pode ver, o uso do modelo CSS fornece uma boa página formatada onde você pode inserir seus vários feeds de notícias para uma boa exibição de notícias em tempo real em uma página inteira.

Isso é melhor do que a maioria dos aplicativos de streaming de notícias que você encontra em qualquer lugar gratuitamente, e também permite que você o personalize exatamente de acordo com as suas necessidades - essa é a beleza de usar uma página da Web em vez de um aplicativo.

Você criou sua própria página junto com este artigo? Você ficou preso em algum lugar ou descobriu outras fontes interessantes para widgets de notícias de streaming em tempo real? Compartilhe suas ideias na seção de comentários abaixo.

Crédito de imagem: ShutterStock

In this article