Slide lindo e moderno-aprenda como colocar em seu blog! - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

Slide lindo e moderno-aprenda como colocar em seu blog!

Publicado em 04/02/2019

Tutorial que ensina como colocar um slide de posts recentes com exibição de categoria específica. Slide automático de posts recentes para blog. Slide estilo carrossel para blog.
Trago hoje mais um modelo de slide para usar no blog, conforme combinei contigo que faria ao longo desse ano.
Hoje vou te ensinar esse modelo bonitinho, que mostra os títulos dos posts de uma categoria pré-definida por você e que não tem complicação nenhuma pra instalar, é basicamente copiar e colar.
Depois de pronto o resultado será esse, claro que com a categoria que você escolher, de seu blog:


Demonstração do tutorial


Gosto e prefiro slides assim, com exibição de posts de uma categoria específica pois os posts recentes já estão na página inicial, portanto faz pouco sentido mostrar a mesma coisa num slide.
Use o slide para destacar aquela categoria de seu blog que é seu carro-chefe, entende? Se eu fosse instalar aqui eu destacaria a categoria Dicas para blogs.

Vamos aprender?
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 será levemente 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!

Como instalar o Slide automático de posts recentes estilo Carrossel no blog?


Como instalar o Slide automático de posts recentes estilo Carrossel no blog?
Para começar acesse a página com os códigos necessários ao tutorial:


Copiar os códigos


A seguir acesse o painel administrativo de seu blog e clique em Tema.
A seguir clique em Editar HTML e dentro da caixa do código-fonte tecle Ctrl+F.
Vai expandir a caixa de busca.
Dentro dela digite Variable definitions e tecle Enter para localizar.
Vai aparecer (nos templates nativos do Blogger) mais ou menos assim:

/* Variable definitions
   ====================

Abaixo da linha pontilhada cole o CÓDIGO DAS VARIÁVEIS.
Salve.
Agora, na barra de busca, digite ]]></b:skin> e localize.
Acima dessa tag de fechamento cole o CÓDIGO CSS e salve.

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

Localize a tag </header> e cole abaixo dela o CÓDIGO HTML.
Salve. Isso vai posicionar seu slide abaixo do seu cabeçalho/header. Se desejar inserir em outro lugar me pergunte comofaz aí nos comentários.
Finalmente localize a tag </body> e cole acima dela o CÓDIGO DO PLUGIN.
Salve.

Importante: para o slide aparecer  falta um ajuste.
Volte ao CÓDIGO JAVASCRIPT que foi colado acima de <head> e localize // CATEGORIA AQUI
Você verá isso:
cat1 = 'Beleza';
Troque a palavra Beleza por sua categoria escolhida.
Se eu fosse usar esse slide em meu blog, por exemplo, eu colocaria Dicas para blogs, que é a grafia exata da minha categoria Dicas para blogs.
Entendeu?
Escolha a sua categoria e a coloque aí. Grafia exata, não esqueça!
Salve.
Seu slide deve estar aparecendo agora.


Dicas extras para personalizar o slide


Tutorial que ensina como colocar um slide de posts recentes com exibição de categoria específica. Slide automático de posts recentes para blog. Slide estilo carrossel para blog.
Quer baixar o Tema Make up e edita-lo ao seu gosto? Clique aqui e baixe, é de graça!

Cores e fontes são alteradas via painel do blog. Por isso criei as variáveis, para facilitar na hora de trocar cores, etc...
Vá em Tema/Personalizar/Avançado e você verá os itens relativos ao slide no painel.

Os títulos dos posts estão em uppercase. Se quiser em fonte normal localize:
text-transform: uppercase;
E troque uppercase por none. Salve e a fonte ficará normal.

A cor e a borda da setinha de navegação você altera nesse trecho (está no CÓDIGO JAVASCRIPT):

.owl-theme .owl-controls .owl-buttons div {
  color: #ffffff;
  border: 1px solid #ffffff;
  display: inline-block;
  zoom: 1;
  margin: 5px;
  padding: 5px 10px;
  font-size: 28px;
  filter: Alpha(Opacity=30);
  opacity: .4;
}

Mude #ffffff pelo código da cor que desejar e salve.
Aqui tem uma tabela de cores e seus respectivos códigos hexadecimais.

Caso você queira exibir o slide somente na página inicial do blog e não nas páginas dos posts pode aplicar a condicional que faz isso.
No CÓDIGO HTML cole, antes dele, a condicional que vai ocultar o slide nas páginas internas.
Feche a condicional e tá feito.
O código ficaria assim (em azul é a condicional e seu fechamento):

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div class='carousel_slider'>
<div class='slider section' id='slider'>
<div class='carouselle3 slider' id='main-slider'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+cat1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div></div>
</b:if>

Para ver todas as condicionais que podem ser usadas para exibir ou ocultar elementos no Blogger leia:



E terminei!
Faça aí em seu blog de testes, é muito simples e fácil, basicamente copiar e colar.
Aproveite, se divirta, aprenda!

⬇️
Gostou do Tema Make up?
Clique aqui e baixe-o, gratuitamente!







20 comentários

  1. oi Elaine, queria pedir que fizesse uma postagem falando o que vai acontecer com o blogger agora que a rede social google+ vai acabar.

    ResponderExcluir
  2. Olá tudo bem? Esse passo-a-passo funciona em Wordpress?

    ResponderExcluir
  3. Olá Elaine, consigo fazer tudo do tutorial, menos encontrar a parte do "Body". E agora?

    ResponderExcluir
    Respostas
    1. Adriana, não tem jeito rsrsr tem que achar.
      Acredite em mim, ele tá lá...
      Qual tema vc usa?

      Excluir
  4. Elaine eu coloquei no meu blog de teste e ficou bonito, mas tem um espaço entre cada foto. Não ficou juntinho coo na demonstração que você colocou. Tem como juntar as imagens, para que fiquem lado a lado sem espaço?

    Além disso é possível diminuir um pouco as imagens? Diminuir o tamanho delas.

    ResponderExcluir
    Respostas
    1. Lara, eu explico no tutorial que se o seu template não for responsivo o resultado será diferente.
      Seu tema é responsivo?
      Qual o blog?

      Excluir
    2. Não é responsivo. Eu tentei deixá-lo responsivo, pois personalizei meu blog seguindo seus tutoriais. Todavia, na hora de transformar em responsivo eu não gostei do resultado e aí deixei só personalizado mesmo. Tenho usado muitas das suas dicas e tutoriais para deixar meu blog agradável aos leitores. :)

      https://www.emocoesaflordapele.com/

      Eu removi o slide. Hoje eu tentei usar o slide para blogs literários (pois o meu é literário) e não consigo deixar a seta mais clarinha e além disso o slide para e fica sem imagens antes de voltar ao início e as imagens aparecerem de novo. Não importa quantas resenhas eu coloque para exibir, ele só exibe até vinte resenhas. Aí removi este também. Eu dei sorte com todas as suas dicas que testei, apenas os slides não dão muito certo no meu blog.

      Excluir
  5. não consegui achar a tag HEADER em meu template, como proceder?

    ResponderExcluir
    Respostas
    1. Revirei meu layout e nao possui a tag

      Excluir
    2. Caso seu template seja baixado da internet pode mesmo estar de outro jeito.
      Não tenho como dizer exatamente onde estaria pois temas externos ao blog possuem peculiaridades próprias.

      Excluir
  6. Tenho um dos seus templates e não encontro /* Variable definitions

    ResponderExcluir
  7. Elaine, tudo bem? Uso o template Amora, criado por você, e não encontro o "/* Variable definitions" no HTML. Se o "/* Variable definitions" não aparece, onde ponho essa parte do código?

    ResponderExcluir
    Respostas
    1. Procure bem no começo do código fonte por variáveis do painel, está bem abaixo dos créditos.

      Excluir
  8. Uma óptimo forma para deixar o meu Blogger moderno.
    https://paulo-newsy.blogspot.com

    ResponderExcluir
  9. Uma óptima forma de deixar o meu Blogger personalizado na área de Slide.
    https://paulo-newsy.blogspot.com

    ResponderExcluir
  10. Olá boa tarde, Elaine. No meu blog tenho o do tema Amanda, posso deixar com categoria? Tem tutorial?

    ResponderExcluir
  11. Boa noite, não consigo abrir a demonstraçã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.
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…