Slide de posts recentes- exibição de categoria pré-definida- Modelo Allegra - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Slide de posts recentes- exibição de categoria pré-definida- Modelo Allegra

Publicado em 14/05/2019

Slide de posts recentes- exibição de categoria pré-definida- Modelo Allegra
Dias atrás eu disponibilizei o Tema Allegra para baixar, de graça, aqui no blog.
Hoje vou fazer contigo o tutorial que ensina como instalar o slide presente no Tema Allegra em qualquer blog do Blogger. Esse slide está presente também no Tema Rebecca, outro template grátis para blog que disponibilizei aqui no blog recentemente.
Esse slide pode ser definido para exibir posts de uma categoria escolhida por você, mas também pode exibir os posts recentes de maneira geral.Pode aparecer em todas as páginas ou só na página inicial. Ou nas páginas internas.
Está tudo explicadinho no tutorial.
Vamos aprender?

Alertas para ler antes de começar o tutorial


1- Todo slide é exigente: em geral só podemos ter um no blog, e insistir em colocar 2 vai causar conflito. Então, se você já tem algum slide em seu blog, ou algum recurso que dependa da biblioteca Jquery para funcionar poderá eventualmente ter que optar.
Na dúvida sempre teste antes em um blog de testes. Isso é básico: jamais faça a primeira tentativa em seu blog real, por mais simples que pareça. Vai por mim.

2- O segundo alerta é exatamente isso: sempre use um blog de testes público, com ao menos 5 posts na categoria escolhida, para testar slides assim.

3- Blogs privados não dão certo, posts sem imagens também não, e os posts precisam ter marcadores inseridos.

4- Como a maioria dos meus tutoriais esse slide não foi testado em temas não-nativos do Blogger (aqueles que as pessoas baixam de sites na internet). Pode tentar, se der certo me diz.

5- Em geral tutoriais assim não podem ser aplicados aos modelos Soho, Contempo, Notável e Empório. Mas se quiser tentar vale a pena. Não devem funcionar, contudo.
Ah, nem nos modelos de visualizações dinâmicas do Blogger.

Entendeu?
Alertas feitos, vamos trabalhar!


Como colocar um slide no Blogger- passo a passo


Comece acessando a página com os códigos que vamos usar:


Copiar o código


A seguir vá ao painel administrativo de seu blog de testes e clique na aba Tema.
Aí clique em Editar HTML e dentro da caixa do código-fonte tecle Ctrl+F.
Vai surgir a barra de busca,
Dentro dela digite Variable definitions e tecle Enter para localizar.
Acima de cole as VARIÁVEIS DO SLIDE.
Salve.

Agora digite ]]></b:skin>  na barra de busca e tecle Enter para localizar.
Acima dessa tag de fechamento cole o CÓDIGO CSS.
Salve.

Na barra de busca digite </body> e localize.
Acima dessa tag de fechamento cole o CÓDIGO DO PLUGIN.
Sim, é um código bem grande.
Salve a inserção.

Estamos finalizando.
Localize agora a tag de fechamento </head> e cole o CÓDIGO JAVASCRIPT acima dela.
Salve.

Importante:
Nesse código é que definimos qual categoria terá os posts exibidos no slide.
No meu blog de exemplo eu defini que exibiria os posts da categoria Beleza.
Troque a palavra Beleza que grafei em azul no código pelo nome exato da categoria que deseja exibir os posts, ok?

E terminamos!
Para trocar cores e fontes vá em Tema/Personalizar/Avançado e aí você verá os comandos do slide.
Ajuste como desejar e pronto!
Simples e fácil, né?

Uma dica final:
Caso você queira exibir o slide apenas na página inicial do blog pode aplicar ao CÓDIGO HTML a condicional que define isso.
Se quiser exibir o slide apenas nas páginas internas dos posts também dá, basta aplicar a condicional que faz a mágica.

Veja todas as condicionais aqui:


Experimente em seus blogs, faça testes, leia os códigos (em especial o CÓDIGO CSS)
Enjoy!








10 comentários

  1. Muito lindo o template: P A R A B É N S ! ! Sempre acompanho o seu trabalho e vou personalizando o meu blog através dos seus tutoriais.
    Gostaria que fizesse um tutorial ensinando a personalizar somente a home, deixando ela diferente das demais postagens do blog - será que isso dá pra fazer no blogguer?
    Beijos!!

    ResponderExcluir
    Respostas
    1. Carminha, não tem tutorial para isso não, mas é possível sim.
      Basta definir os estilos que deseja aplicar a home e inseri-los dentro da condicional que comanda a home. Aqui no blog tem um tutorial que ensina como usar as condicionais do Blogger, elas servem também para isso, diferenciar a home das páginas internas.
      O Tema Rebecca, por exemplo, usa esse recurso de home diferente das páginas internas, ainda que apenas na área do post.
      Falando assim parece complicado mas é simples.
      Quem sabe um dia não me animo...
      beijossss

      Excluir
  2. Amo tudo aqui ,seu trabalho é excelente e de muito bom gosto pena que eu não consigo personalizar, eu amei o tema Rebeca é perfeito Parabéns!!!

    ResponderExcluir
    Respostas
    1. No post tem alguns links que ajudam a editar coisas como menu, etc...
      E na faq do tema tem todos os tutoriais que usei, leia cada um deles para entender certinho como editar cada área como menu, slide, títulos da coluna lateral, etc...
      bjssss

      Excluir
  3. Elaine me tira uma dúvida, coisa de quem não entende mesmo rsrs. Achei os códigos enormes, são bem grandes mesmo, isso não deixa o blog mais lento, implica na velocidade ou coisa do tipo?
    Beijos, flor!

    ResponderExcluir
    Respostas
    1. Jackeline, tudo, até um gif minúsculo, tem peso.
      O fato dos códigos serem grandes não aumenta o peso, mas o fato de inserir slide sim.
      Ter os códigos abertos ou hospedados não impacta, mas ter o slide sim.
      Não é grande coisa, o que mais pesa no blog são as imagens...

      Excluir
  4. Olá Elaine, primeiro obrigada por todas as dicas, meu blog aos poucos está ficando do jeitinho que eu quero, graças ao seu blog maravilhoso. Eu queria muito um slide no meu blog, exatamente assim como esse que você ensina aqui, mas fiz todos os passos no meu blog de testes e só apareceu um espaço em branco abaixo do cabeçalho. Será que é algum conflito com o botão de voltar ao topo(o único recurso que eu acho que usa biblioteca Jquery) ou será o tamanho das imagens que não são padronizadas. O que pode ser? me ajuda Elaine, quero tanto um slide.

    ResponderExcluir
  5. Nataly, em qual blog está tentando?
    Se for em seu blog principal ele precisa ter posts. Só vi um, se não tiver posts o slide, obviamente, não vai aparecer...
    Tem que ter, ao menos, uns 10 posts com marcadores, imagem grande e ser público...

    ResponderExcluir
  6. Oi Elaine, tenho uma pequena dúvida: como faço para alterar a cor das bolinhas que aparecem no slide? Aquelas que ao clicar mudam o slide. Estão roxos e eu preciso delas pretas para combinar com o meu layout

    ResponderExcluir
    Respostas
    1. Para trocar cores e fontes veja no tutorial, tem a informação lá :)
      É pelo painel do blog, em Avançado.
      bjssss

      Excluir

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…