Slide de posts recentes separados por categoria- Modelo Amanda - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Slide de posts recentes separados por categoria- Modelo Amanda

Publicado em 04/01/2019

Slide moderno que exibe posts de categoria pré-definida. Slide de posts recentes. Slide para blog. Slide para Blogger.
Tenho publicado, ao longo dos anos, uma série bem variada de slides para usar no blog. Mas gastei algumas horas ultimamente para converter e adaptar para Blogger/Blogspot alguns slides que a gente encontra em blogs WP. Vou publicar esses slides diferentes e muito bonitos ao longo desse ano, ao menos 1 por mês, e assim você, querido leitor, terá ainda mais opções na hora de decidir qual o melhor slide para seu blog.

Hoje vou te ensinar como instalar este, que deve ser usado para exibir posts de uma categoria específica de seu blog. Veja a demonstração:


Demonstração do tutorial


Slide de posts recentes separados por categoria- como instalar


Vamos trabalhar?
Antes, porém, alguns alertas:

1- Esse slide é responsivo, portanto fica melhor em um template responsivo. Dá pra instalar em um que não seja responsivo, mas o resultado poderá ser diferente.
2- Esse slide pode causar conflito caso haja em seu blog algum outro recurso que use a biblioteca JQuery para funcionar. Tem que testar pra saber se terá conflito ou não.
3- A dica de ouro que sempre dou é: teste antes em um blog de testes que tenha exatamente o seu template real, do seu blog.
Só depois de haver testado e entendido todos os passos e particularidades do slide aplique-o em seu blog real.
E, mesmo assim, sempre faça backup antes de começar. Assim você tem uma cópia de segurança caso algo não fique como deveria ou você desista do slide.
4- Outra dica valiosa é: o blog onde for instalar o slide, mesmo se for de testes, precisa ser público. Blogs privados não distribuem feed e portanto um slide de posts recentes não vai funcionar.
5- O blog onde for inserir o slide precisa também ter ao menos 5 posts na categoria escolhida.
Meu blog-modelo, por exemplo, tem 15 posts no total e 5 na categoria que escolhi para demonstrar.

Entendeu as recomendações?
Então vamos trabalhar!
Comece acessando a página com os códigos que vamos usar:

Copiar os códigos

Agora vá ao painel administrativo de seu blog e clique em Tema.
Aí clique em Editar HTML e dentro da caixa do código-fonte tecle Ctrl+F.
Na barra de busca que expandir digite ]]></b:skin> e tecle Enter para localizar.
Acima dessa tag de fechamento cole o CÓDIGO CSS.
Salve.

Localize </head> e acima dela cole o CÓDIGO JAVASCRIPT.
Salve.

Localize finalmente a tag de fechamento </body< e acima dela cole o CÓDIGO DO PLUGIN.
Sim, é um código bem grande.
Cole e salve.

Agora vá até a aba Layout de seu blog e clique em Adicionar um gadget.
Escolha HTML/JAVASCRIPT e dentro da caixinha que expandir cole o CÓDIGO HTML.
Preste atenção!
No código você verá esse trecho:

<script>
document.write("<script src=\"/feeds/posts/default/-/Vintage?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showlatestposts1\"><\/script>");
</script>

Troque a palavra Vintage pelo nome da categoria cujos posts deseja mostrar.
Tem que ser grafia exata, do mesmo jeitinho que aparece em seu blog.
Se eu fosse instalar esse slide aqui no blog eu iria mostrar os posts da categoria Dicas para blogs, então eu trocaria Vintage por Dicas para blogs.
Se colocasse dicas para blogs não funcionaria.
Entendeu? Grafia exata!

Colocou sua categoria escolhida? Salve, arraste para baixo de seu cabeçalho e salve a alteração do Layout.
Está feito!

Terminei!
Caso tenha alguma pergunta que não esteja contemplada no tutorial deixe sua dúvida nos comentários e eu ajudo assim que for possível.
Ah, curte o post!
Se for útil pra ti eu fico feliz, e se ganhar uma ajuda na divulgação fico ainda mais contente!


Template personalizado grátis para baixar 


Quer baixar gratuitamente o Tema Amanda, do blog onde demonstrei o slide de hoje?
Clique no botão abaixo, leia as informações e baixe o template!

Fazer o download





14 comentários

  1. Coloquei a palavra que eu queria e mesmo assim não aparece o slider

    ResponderExcluir
  2. Eu também coloquei a palavra, e não aparece o slider.

    ResponderExcluir
  3. Ah, e quando coloquei o código CSS, apareceu esse Erro: Erro ao analisar XML, linha 1768, coluna 3: The element type "b:skin" must be terminated by the matching end-tag "" :(

    ResponderExcluir
    Respostas
    1. Soraya, se não inserir o código css o slide não vai funcionar.
      Se está dando erro verifique se não esqueceu nenhum sinal, em geral esse erro acontece quando algum sinalzinho é deixado pra traz

      Excluir
  4. olá. primeiramente, obrigada por disponibilizar esse conteúdo. seu blog realmente é muito legal e util.
    queria uma ajuda. o codigo que disponibilizou, não aparece lá no slide o titulo do post. fica a imagem do post, o quadradinho branco na frente e onde deveria aparecer o titulo do post, na frente desse quadradinho branco, nao aparece nada.

    ResponderExcluir
    Respostas
    1. Thamiris, em geral isso acontece porque o slide foi colocado dentro da div do header e este não foi preparado para receber mais um elemento.
      Qual o endereço do blog?

      Excluir
  5. olá, fiz duas vezes bem devagar, lendo tudo direitinho e não apareceu o slide, como do da Kamilla e da Soraya, o que pode ter acontecido?

    ResponderExcluir
    Respostas
    1. Não sei dizer, no blog de testes está normal...
      Em qual blog está sua tentativa?

      Excluir
  6. Olá tudo bem? Instalei o template Amanda, mas gostaria de tirar essa barra na parte superior será que pode me ajudar ou só indicar quais os códigos que tenho que tirar.

    ResponderExcluir
    Respostas
    1. Na faq do tema amanda tem um link para o tutorial do menu que usei.
      Aí é só seguir o tutorial ao contrário, ir retirando os códigos ao invés de adicionar e o menu sumirá.

      Excluir
  7. bom dia Elaine! Primeiramente, muito obrigada por compartilhar tanta informação legal com a gente!
    Instalei esse slide no meu blog teste, porém só apaece a foto e a caixinha branca no slide, não aparece o texto como o título da postagem. Como consigo resolver?

    meu blog teste: http://asukaviaja-teste.blogspot.com

    ResponderExcluir
    Respostas
    1. Suka, o slide precisa ser colocado exatamente abaixo do cabeçalho.
      Para isso é preciso desbloquear essa área, que no tema amora é bloqueada pois originalmente não há slide ali.
      Para desbloquear localize Cabeçalho no código fonte.
      Aí aparecerá um trecho parecido com esse, que precisa ser alterado nas palavras que sinalizei:https://1.bp.blogspot.com/-f7xcMhuR23E/XSTMpjH-c2I/AAAAAAAAAsg/olD6yxoVR4I85to2XdAR3LizsKq2O5TnwCLcBGAs/s1600/ajuste.png

      Isso vai liberar a área imediatamente abaixo do header e possibilitar incluir elementos ali, como o slide.

      Excluir
  8. Oi, Elaine, tudo bem?
    Pode me dar uma ajuda? fiz o passo a passo exato como descrito e não funcionou. O Slide não apareceu! :(

    ResponderExcluir
  9. Ola, eu queria alterar as abas do menu mas não consigo. Tentei por um tutorial seu que explica como mudar e adicionar links, mas achei confuso. Será que pode me ajudar?

    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.
Deixe sua pergunta ou solicitação sempre nos comentários, eu infelizmente não tenho como responder pedidos de ajuda por email.
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…