Slide estilo carrossel para blogs literários - * Blog Elaine Gaspareto *

Slide estilo carrossel para blogs literários

Publicado em 21/02/2018

Tempo de leitura:

Slide estilo carrossel para blogs literários

Você tem um blog literário ou que posta, dentre outros assuntos, resenhas literárias?
Não precisa ser um blog exclusivamente literário, mas se posta sobre livros então esse slide pode ser o que você estava buscando!
Depois de pronto ele ficará assim:


Demonstração do tutorial


No caso do meu exemplo eu defini que o slide mostraria apenas os posts que são resenhas de livros. Tem outros posts, de outras categorias no blog, mas o slide só vai mostrar as resenhas.

Para que funcione certinho é preciso que seu blog tenha definida a categoria que vai utilizar no slide, como por exemplo Resenhas (ou qualquer outra que escolha, claro).
Isso é importante porque vamos configurar de um jeito que só mostre os posts da categoria que definirmos previamente, que no caso do nosso exemplo é Resenhas.

Outra coisa importante é que a primeira imagem de cada post da categoria escolhida (Resenhas, no meu exemplo) precisa ser a capa do livro.
Isso importa porque vamos configurar o slide para mostrar imagens retangulares, no formato de capas de livros, entende?
Explicações dadas, vamos ao slide?

Como colocar o slide estilo carrossel no blog?


Comece acessando a página com os códigos necessários:


Copiar os códigos


A seguir acesse a aba Tema de seu blog e clique em Editar HTML.
Dentro da caixa do código-fonte tecle Ctrl+F e na barra de busca que expandir digite ]]></b:skin> e tecle Enter para localizar.
Acima disso cole o CÓDIGO CSS e salve.
Nesse CÓDIGO CSS são alteradas coisas como cor de fundo, tamanho das miniaturas, imagem da setinha, posicionamento e tamanho do slide, etc.
Leia o código, ele te dirá o que mudar e onde mudar para que fique como você deseja.

Agora localize </head> e acima dessa tag cole o CÓDIGO JAVASCRIPT.
Salve.
Para que o slide apareça acesse a aba Layout de seu blog e clique em Adicionar um gadget.
Escolha HTML/JAVASCRIPT e na janela que expandir cole o CÓDIGO HTML; no lugar onde está escrito Resenha coloque o nome de seu marcador, exatamente como ele é escrito em seu blog.
Se for resenha, resenhas, Resenha, Resenhas, etc...
Tem que ser a grafia exata, tá?

Onde está escrito 10 em azul é a quantidade de posts exibidos.
Altere como preferir (mas não coloque mais exibições do que você tem de posts ou o slide trava); sugiro de 15 a 20 posts.
Salve, arraste para onde deseja que o slide fique (eu recomendo abaixo do cabeçalho, mas tem que testar) e salve a alteração do Layout.
Se tudo deu certo seu slide já aparece.

Dicas extras sobre o Slide Carrossel


1- Antes de qualquer coisa leia e releia o tutorial.
Certifique-se de haver entendido tudo, de haver inserido os códigos no lugar certo, de não ter esquecido nada, etc...

2- Nunca esqueça: faça sempre primeiro em um blog de testes que tenha exatamente o mesmo template que seu blog real.

3- Caso você tenha feito tudo certinho e o slide não apareça confira se já não há alguns slide ou qualquer outro elemento de página em seu blog que possa causar conflito com esse slide.
Para tirar a dúvida teste em um template limpo, nativo do Blogger.

4- Seu blog precisa ser público para que o slide funcione, tá? Em blogs privados ele não vai dar certo.


Caso tenha alguma pergunta ou consideração a fazer diga aí nos comentários e eu respondo assim que possível.
E não esqueça de compartilhar ou curtir o post, não custa nada e muito me ajuda!





18 comentários via Blogger
comentários via Facebook

18 comentários:

  1. Respostas
    1. Em qual blog vc está inserindo o slide?
      Colocou o marcador correto? O blog é público? Tem posts no marcador que vc escolheu?

      Excluir
  2. oi tudo bem eu coloquei no meu blog e estava funcionando certinho agora parou so m,ostra as 4 ultimas resenhas o que pode estar acontecendo.

    ResponderExcluir
    Respostas
    1. Jaine, não sei dizer.
      Deve ter algo causando conflito, códigos remanescentes de outro slide, por exemplo.
      Experimente em um template sem nenhuma personalização e vc verá que funciona, então creio que seja algo em seu template...

      Excluir
  3. AMEI! Tem algum código para deixar ele responsivo?

    ResponderExcluir
  4. tem como colocar esse no WordPress ?

    ResponderExcluir
  5. Olá. estou usando seu layout violeta.... infelizmente não está peando, fiz tudo certo... e tbm não está aparecendo comentários das postagens, só a quantidade... poderia me ajudar?

    ResponderExcluir
    Respostas
    1. Jéssica, sobre o slide eu não sei dizer, tem certeza que fez tudo certo? Não esqueceu nada mesmo?
      Olhei seu código fonte e logo no começo vi que inseriu código no lugar errado.
      Releia o tutorial, tenho certeza que vc esqueceu algo ou colou código em local errado...
      Também precisa colocar o nome correto do marcador, no código está "resenha" e seu marcador é "Resenhas"
      Percebe o erro? São detalhes que fazem funcionar ou não...
      Sobre os comentários eles são permitidos? Na configuração geral e em cada post está configurado pra ser exibido? Seus comentários são os do Blogger e não do G+?
      Veja esses pontos que citei e me diz se deu certo...
      bjssss

      Excluir
    2. Fiz certinho, mas sobre os cometários, mudei o layout e agr na aba de escrever as publicações tem varias opções mas agr sumiu " comentários "

      Excluir
  6. oi, Elaine
    Só gostaria de saber porque ele não está mostrando as últimas resenhas e sim as resenhas aleatórias que tem no post.

    ResponderExcluir
    Respostas
    1. Eu não sei dizer, pode ser algo em seu blog.
      Qual o blog?

      Excluir
  7. Não consigo ver a demonstração do blog, será que consigo ver em outro blog?

    ResponderExcluir
    Respostas
    1. Isabella, eu corrigi o link, desculpe. Pode visualizar agora :)

      Excluir
  8. Olá, Elaine! Obrigada por compartilhar esse slide, estava querendo há um tempão. Coloquei no meu blog de teste porém a imagem das resenhas só aparecem se eu colocar o slide duas vezes no layout, em dois gadgets diferentes. O ideal pra mim seria apenas um. Futuquei o código todinho e não encontrei nada, você tem alguma dica?

    ResponderExcluir
    Respostas
    1. Mariana, se estiver usando um dos novos templates responsivos nativos do Blogger tipo Emporio, Soho, etc... não vai funcionar corretamente. Esses templates não aceitam personalizações que envolvam lidar com o código fonte.
      bjssss

      Excluir
    2. Acabei arriscando e colocando no meu blog, funcionou perfeitamente, só deu problema no blog de teste. Obrigada! <3

      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.
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…