Slide de posts recentes para colocar na lateral do blog- fácil de verdade! - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

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

Publicado em 20/06/2018

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!





5 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
  3. Elaineeeeee!!! Eu estou sempre inovando e cada vez que eu quero aprontar corro aqui no seu blog kkk. Já faz tempo que eu queria exatamente slides assim desse seu tutorial, mas eu queria mostrar de uma só categoria. Eu vi que você já ensinou aqui como fazer, mas eu me apaixonei por esses slides, então eu troquei o trecho tagName: false por tagName: "DIY" que é o marcador que eu queria mostrar, com aspas, pois assim vc ensina no outro tutorial (loka eu fico juntando uma coisa com outra). Poxa Elaine, deu super certo! Uhuuuu!!! Estou mostrando meus artesanatos com o maior estilo no meu blog. Sem palavras para te agradecer!

    ResponderExcluir
    Respostas
    1. Jackeline, e você acha que a maioria dos tutoriais que mostro aqui nascem como?
      Eu mexo, eu tiro coisa, eu coloco coisa, eu faço as maiores doideras com os pobres dos códigos porque vou pela lógica, e de vez em quando a lógica funciona rsrsr
      Mas nem sempre, porém é assim que a gente toma gosto pela coisa e aprende...
      Você vai viciar nisso, vai por mim rsrsrsrs
      beijossss

      Excluir
  4. Obrigada pelos ensinamentos. como faço para retirar o nome do autor dos slides deixando apenas o título?

    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…