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

Slide estilo carrossel para blogs literários

Publicado em 21/02/2018

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!




8 comentários via Blogger
comentários via Facebook

8 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
    Respostas
    1. Hum, não, mas vou ver se consigo adaptar...

      Excluir
  4. tem como colocar esse no WordPress ?

    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…