Slide de posts recentes para colocar na lateral do blog- fácil de verdade! - * Blog Elaine Gaspareto *

Slide de posts recentes para colocar na lateral do blog- fácil de verdade!

Publicado em 20/06/2018

Tempo de leitura:

Slide de posts recentes para colocar na lateral do blog- fácil de verdade!
Aqui no blog há uma infinidade de modelos diversos de slide.
Tem slide de destaques, slide responsivo, slide de posts recentes, slide de posts recentes de uma categoria específica...
Hoje vou te ensinar esse, que é uma adaptação de outro mais antigo que parou de funcionar.
Ajustei os códigos, trouxe o script para o código sem precisar hospedar e olha como ficou:


Demonstração do tutorial


Quer aprender?
É tão simples que você nem vai acreditar!
Além de tudo é responsivo, ou seja: se seu template for responsivo ele vai se adaptar e caso seu template não seja responsivo mas apenas adaptado para a versão mobile pode usar esse slide que dá certo.
Ao final explico como conseguir essa mágica, ok?


Como colocar o slide de posts recentes no blog?


Comece copiando o código que fará o slide funcionar:


Copiar o código


A seguir vá ao painel administrativo de seu blog e clique na aba Layout (Esquema, ou Design, é a mesma coisa).
Aí clique em Adicionar um gadget e dentre as opções que surgirem escolha HTML/JAVASCRIPT e na caixa que expandir cole o código copiado da minha página de códigos.
Altere onde está o endereço do meu blog (https://www.elainegaspareto.com) colocando, claro, o endereço completo de seu blog, salve, arraste para onde deseja que o slide fique e salve a alteração do Layout.
E é só isso!


Dicas extras importantes para configurar o slide

Dicas extras importantes para configurar o slide

1- Deixei marcados no código as áreas editáveis que se referem ao tipo e cor de fonte, se quer o fundo em degrade nas imagens, etc. Sem alterar nada será exatamente como em meu exemplo. Para alterar demanda um pouco de conhecimento mas se ler o código ele mesmo te dirá o que fazer.

2- Caso queira retirar a data e autor dos posts do slide apague todo esse trecho do código:

ul.rcentside .label_text{
position:absolute;
bottom:0;
left:20px;
z-index:2;
color:#ffffff; /*COR DA DATA E AUTOR*/
font-size:90%; /*TAMANHO DA FONTE AUTOR E DATA*/
opacity:0;
transition:all .3s;
}
ul.rcentside li:hover .label_text{
bottom:20px;
opacity:1;
}

3- Seu blog usa a versão adaptada para mobile, a nativa do Blogger? Então, para exibir o slide no celular faça assim:




4- No final do código você verá esse trecho:

FeaturedPostSide({
  blogURL: "https://www.elainegaspareto.com",
  MaxPost: 90,
  idcontaint: "#featuredpostside",
  ImageSize: 300,
  interval: 5000,
  autoplay: true,
  tagName: false

Ali onde está o endereço do meu blog troque pelo seu, isso é essencial!
Em MaxPost: 90 é onde eu defini a quantidade de posts que o slide vai "puxar".
Pode ser menos, mas não testei com mais posts.
Faça testes e me diz se não trava.
O valor expresso em interval: 5000 diz respeito a velocidade de transição das imagens.
Altere para mais ou para menos, faça testes. Do jeito que deixei considero ideal.
Em autoplay: true quer dizer que a alteração do slide é automática. Prefiro assim, claro, mas se quiser que não seja automático troque true por false.

5- Tem muitas outras personalizações possíveis, mas do jeito que está considero o melhor.
Contudo, não se acanhe, faça testes, experimente, mude cores, mexa para aprender.
Vai por mim, é divertido!





2 comentários via Blogger
comentários via Facebook

2 comentários:

  1. Amei o seu blog, achei um post seu falando sobre como fazer o blog crescer e estou seguindo suas dicas,criei um faz apenas alguns dias pois pretendo seguir a carreira de jornalismo, por ser um blog com o intuito de treinar apenas, não ligo muito para a divulgação dele, mas gostaria bastante se meu blog fosse reconhecido como o seu. Se puder dar uma olhada o endereço e esse aqui https://meucoracaomandou.wordpress.com/?blogsub=pending#subscribe-blog Beijoooos

    ResponderExcluir
  2. Oi linda. Então eu tentei usar este código mas não deu certo. O que eu faç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.
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…