Posts recentes do blog em formato Breaking News

em 11 de julho de 2016

Posts recentes do blog em formato Breaking News

Há alguns anos mostrei aqui no blog esse gadget que exibe os posts recentes do blog em formato de menu de notícias deslizante.
Reveja:
http://www.elainegaspareto.com/2014/02/postagens-recentes-em-formato-de-menu-de-noticias-deslizante.html

Hoje vou compartilhar com você um outro tutorial, mais moderno, que também exibe os posts de seu blog (ou de qualquer outro que tenha os feeds ativados) em formato de menu de notícias.
Assim:

Demonstração do tutorial



Para instalar em seu blog são 3 passos bem simples.
Para começar abra a página onde estão os códigos a serem usados. Mantenha aberta.


Copiar os códigos


A seguir acesse a aba Modelo de seu blog e clique em Editar HTML.
Dentro da caixa de código tecle Crtl+F e na barra de busca que expandir cole isso:



A seguir tecle Enter para localizar.
Acima da tag localizada cole o Código CSS que copiou da página dos códigos que pedi para deixar aberta.
Salve.

A seguir digite </body> dentro da barra de busca e tecle Enter.
Acima de </body> cole o Código Javascript.
Salve.

Agora acesse a aba Layout (Design/Esquema, depende do idioma) e clique em Adicionar um gadget.
Escolha a opção HTML/JAVASCRIPT e dentro da caixa que expandir cole o Código HTML. Coloque o endereço de seu blog, sem http.
Se for blog com domínio próprio coloque www; se for blog com a extensão blogspot coloque sem www e sempre sem http.
Salve.

Arraste para onde deseja que fique e a seguir salve a alteração.
Se tudo deu certo seu Breaking News está ativo e exibindo os posts de seu blog.
Facinho e legal, né?


Dicas extras:

  • Leia e releia o tutorial até se certificar de haver entendido.
  • Altere cores e fontes no Código CSS. Deixei marcado em CAPSLOCK as áreas editáveis.
  • É muito importante colocar o endereço correto do blog no Código HTML. Se for blog blogspot, coloque sem www e se for blog com domínio próprio coloque com www mas sempre sem o htpp://.
  • O feed do blog cujos posts deseja exibir precisam estar ativos e o blog precisa ser público.
  • O gadget exibe cerca de 40 posts mais recentes e não dá pra alterar.
  • Também não consegui alterar o posicionamento da data. Traduzi os meses mas não consegui inverter a data. Se alguém que entende de codificação quiser tentar faça por sua conta e risco.
  • Caso queira usar a fonte especial Roboto que usei no exemplo inclua esse código abaixo de <head> em seu código fonte:

Se fizer em seu blog diz pra mim!
Aproveite o tutorial, e se gostou clique em Compartilhar ao final do post!
Enjoy!




Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

7 comentários , comente também!

  1. Olá Elaine,como sempre seus tutoriais são maravilhoso e úteis.
    Sua loja de templantes está linda, maravilhosa.
    Fico feliz em ver que sua Fã Page aumentou as curtidas...rsrs....Eu curtia e nunca aumentava...rsrs..
    Parabéns querida sucesso para vocês!

    ResponderExcluir
  2. Olá, Elaine!
    Sempre nos ajudando. Obrigadão.
    Beijos.

    ResponderExcluir
  3. Olá Elaine , gosto muito do seu blog... seus tutoriais sobre blog me ajudou e vem me ajudando muito. Abraços! da uma olhada no meu blog depois fanaticosdaweb.blogspot.com

    ResponderExcluir
  4. Olá Elaine. Antes de tudo quero que saiba que amo seu blog e já fiz um monte de suas dicas maravilhosas para o blog!!! Estou procurando este efeito: https://www.turbosite.com.br/blog/criando-um-efeito-de-zoom-apenas-com-css3/
    É para por apenas nas imagens das postagens da página inicial do meu blog (as imagens são expansíveis). Mas não estou sabendo onde colocar os códigos. Quem postou não exp´licou direito. Seria possível você repostar e explicar o passo a passo? Por exemplo: Onde é que coloco o código da div que você descreveu no blogger? E em que parte do HTML do blogger eu coloco o CSS? E que também o efeito apenas fique nas imagens das postagens na página inicial? Desculpe se estou sendo inconveniente!

    ResponderExcluir
  5. Elaine,
    Você é MARAVILHOSA! Que Deus e os anjos iluminem a sua vida e de sua família, sempre e sempre. Muito obrigado por ter atendido o meu pedido. Foi exatamente isto que queria. E ainda com sua excelente explicação, aula, dedicação, atenção, segurança, profissionalismo, digno de um profissional bem mais que exemplar.

    Já tinha visto isto num blog que não estava nem aí para explicar correto. Este blog mostrou uma explicação muito vaga. Mas você, uma excelente profissional, refez muito mlehor, bem explicado, com total dedicação.

    Se já amava seu trabalho, agora eu amo ainda mais!

    Parabéns por existir e muito obrigado!

    ResponderExcluir
  6. Oi Elanine
    Parabéns pelo seu trabalho você é maravilhosa mesmo só que o meu breaking news não funciona fiz conforme esta no passo passo, mas não aparece nada, apenas uma caixa vazia
    Se puder me ajudareu agradeço.

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…