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

Tempo de leitura:

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!







4 comentários

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…