Criar uma página de exibição notícias ticker completa com css & rss widgets

Quando você é um blogueiro, é realmente importante para se manter até a velocidade com as últimas notícias dentro do seu nicho particular. Pessoas levá-lo mais a sério quando você é um dos primeiros a cobrir um evento significativo - mais ainda se você cobri-lo antes da grande mídia, mesmo pega o vento dele.

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

O único problema é que, enquanto existem aplicativos decentes para streaming de linhas únicas de notícias, como Yahoo Widgets ou GlowDart, esses monitores quer cobertura apenas uma pequena corrente de texto recebida, ou eles são difíceis de personalizar para olhar exatamente a maneira que você quer em uma espécie de tela cheia de modo.

Criando sua própria página principal Real-Time News exibição

Para resolver este problema, eu percebi que eu teria que construir algo sozinho. Desde que eu realmente não queria ter o tempo para escrever um aplicativo inteiro, eu decidi criar uma página com os fluxos de RSS incorporado. Eu poderia exibir essa página abrindo meu navegador em modo de tela cheia.

As ferramentas que eu usei para criar esta página, e tudo que você precisa para criar o seu próprio, é um modelo de página da Web baseada em CSS livre (eu escolhi o modelo de negócio livre criado por SliceJack), e uma conta do Google para acesso ao Google Web Elements e Alertas do Google.

Aqui está o que o modelo de negócio padrão, SliceJack parecia antes eu comecei com hackear o código de fundo.

ticker notícias

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

Os dois elementos no topo - o artigo principal ea imagem - Vou apagar. O que eu realmente quero usar são as três colunas no centro da página.

ticker de notícias livre

Quando você baixar o modelo para o seu próprio computador, você vai encontrar o arquivo index.html na pasta principal, mas, em seguida, CSS arquivos em uma pasta de estilo. Visualizando o arquivo index.html, geralmente é bastante simples de encontrar as seções que você deseja modificar. Neste caso, eu estou editando a barra de cima para mostrar “minha Notícia”E mudando os links do menu para diferentes categorias que eu vou para criar páginas de notícias adicionais para.

Video: Axure para iniciantes: criando botão com link para outra página

ticker de notícias livre

Geralmente, é possível encontrar as seções da página, olhando para o

Tag. O “id =” parâmetro diz-lhe o elemento CSS é usado para definir a formatação. No entanto, neste caso, eu só vou acabar com toda a seção definida por “
. É realmente tão fácil como simplesmente excluir a seção da página.

Video: Pack Noticias Daily - Menús y Widgets

A próxima coisa que eu quero fazer para o modelo é alterar a coluna lateral direita um feed streaming de notícias do YouTube. Em primeiro lugar, identificar a seção que deseja substituir com o

etiquetas novamente. Eu encontrei a seção de barra lateral direita dentro do “quadro” div tag.

ticker de notícias livre



Eu não gosto da cor da seção (é cinza e ficaria bobo com um vídeo branco dentro dele), então eu tenho que mudá-lo para o branco. Localize o arquivo css principal e procure o ID. Eu encontrei “barra lateral” dentro main.css, eo fundo definido para #FFF. Para mudar para branco, eu fiz este # 000.

ticker notícias de desktop

Incorporação Widgets em sua página personalizada

Agora a parte divertida. Uma vez que você tem o direito de formatação, você pode começar a incorporação de streaming alimenta em sua página. A primeira coisa que quero fazer é incorporar o elemento YouTube a partir de [Não funciona mais] Elements Web Google.

ticker notícias de desktop

Basta selecionar a fonte de notícias que você quer e, em seguida, copie e cole o código. Na verdade, você poderia construir sua página de streaming de notícias inteiro com apenas o Google Web Elements usando o elemento Google Reader. No entanto, eu quero mostrar quantas fontes estão disponíveis para atualizações em tempo real. Antes de prosseguir, definitivamente, certifique-se de agarrar a notícia Elemento Google, e copiar e colar esse código em sua página também.

Video: 14 - Adicionar widget a página

ticker notícias de desktop

Outro grande recurso para obter feeds de notícias via RSS é FeedWind. Eu realmente gosto dele porque você só colar no feed que deseja, personalizar e dá-lhe uma agradável widget, limpa que você pode incorporar para a direita em sua página.

Além disso, se você vai estar monitorando a notícia dentro de um determinado nicho, você pode não se esqueça de monitorar pesquisa do Google dentro desse nicho. Dentro Alertas do Google, basta selecionar “Feed” no campo “Entregar para”.

Então, você pode usar esse URL do feed em FeedWind para criar o seu widget resultados de pesquisa do Google. Agora que todas essas fontes de notícias diferentes são incorporados na página - a transmissão em tempo real exibição de notícias está finalmente terminado. O menu superior permite que você crie várias páginas como esta, com widgets que trazem fontes de notícias alvejados.

ticker notícias

E isso é fácil agora que você tem a primeira página principal feito. Como você pode ver, usando o modelo CSS fornece uma boa formatado página onde você pode simplesmente inserir seus vários feeds de notícias para uma página inteira de exibição notícia agradável em tempo real.

Video: Como Colocar Widget Feed Flutuante No Blog

Isto é melhor do que a maioria dos aplicativos ticker de streaming de notícias que você encontrará em qualquer lugar de graça, e também permite que você personalize-lo exatamente às suas necessidades - que é a beleza de usar uma página web em vez de um aplicativo.

Será que quis criar sua própria página, juntamente com este artigo? Será que você se desligou em qualquer lugar, ou descobrir quaisquer outras fontes legais para em tempo real widgets de notícias de streaming? Compartilhe suas idéias na seção de comentários abaixo.


Artigos relacionados