Slide de posts recentes com botão Leia mais, título dos posts e categorias- responsivo e automático! - * Blog Elaine Gaspareto *

Slide de posts recentes com botão Leia mais, título dos posts e categorias- responsivo e automático!

Publicado em 20/12/2017


Tempos atrás eu ensinei aqui no blog um slide praticamente igual  a este que vou mostrar hoje, recorde:
Slide de posts recentes com botão Leia mais, título dos posts e categorias
Ele é lindo, funciona perfeitamente mas tem o problema de não ser responsivo.
E a gente sabe que atualmente muitos dos acessos dos blogs são feitos via dispositivos móveis, o que significa que o design do seu blog precisa ser responsivo ou ao menos adaptado aos dispositivos móveis.

Mas esse slide que ensino hoje é responsivo, e portanto cumpre essa função.
Olha que lindo:

Demonstração do tutorial

Vamos aprender?
Antes de começarmos, 4 dicas:
  1. Sempre faça o teste em um blog de testes que tenha ao menos 5 posts com imagens grandes. Evite realizar experimentos em seu blog oficial, ok?
  2. O blog onde for testar o slide precisa ser público; blogs privados não dão certo.
  3. O blog precisa ter ao menos 5 posts com imagens grandes. 
  4. Caso seu blog tenha outro slide ou algum widget que use a biblioteca JQuery para rodar pode acontecer dos scripts se anularem e aí nada funcionará. Então, teste sempre em um blog que não tenha muita coisa instalada e sobretudo, nenhum outro slide ou script em JQuery.


Como instalar o slide de posts recentes responsivo no blog


Dicas anotadas? Acesse a página com os códigos necessários à execução do tutorial:

Copiar o código

A seguir acesse o painel administrativo do blog onde deseja instalar o slide e clique em Editar HTML.
Dentro da caixa de código tecle Ctrl+F e na barra de busca que expandir digite ]]></b:skin> e tecle Enter para localizar.
Acima de ]]></b:skin> cole o CÓDIGO CSS.
Salve.

Agora, na barra de busca, digite </head> e localize.
Acima de </head> cole o CÓDIGO JAVASCRIPT.
Salve.

Localize </body> e acima disso cole o CÓDIGO DO PLUGIN.
Salve.
Sim, é tudo isso mesmo, um bloco bem grande de código.
Infelizmente, por ser um plugin adaptado de um original Wordpress. eu não consegui (ainda) hospedar em um host e fazer funcionar.
Só funciona assim, colando o plugin inteiro. Mas funciona, e é o que importa, né?

Estamos quase no fim.
Vá ao modo Layout do blog e clique em Adicionar um gadget.
Escolha a opção HTML/JAVASCRIPT  e na caixa que expandir cole o CÓDIGO HTML.
Salve, posicione imediatamente abaixo de seu cabeçalho e salve a organização.
Se tudo deu certo (#temfé) seu slide aparecerá certinho.

Dicas extras muito importantes


Slide de posts recentes

1- Como você verá eu deixei 2 opções de CÓDIGO HTML.
A primeira exibe os posts de determinada categoria e a segunda opção exibe os posts recentes gerais.
Caso você opte por exibir posts de determinada categoria precisa editar o CÓDIGO JAVASCRIPT  na parte que aparece assim:

// Enter the posts labels here
cat1 = 'CATEGORIA AQUI';

Onde está grifado em vermelho coloque a categoria cujos posts quer exibir, com a grafia exata de como ela aparece em seu blog.
Exemplo: se eu estivesse usando o slide aqui no blog e quisesse exibir os posts da categoria Dicas para blogs escreveria exatamente assim, que é como essa categoria é grafada.
Entendeu?

2- Se, contudo, optar por exibir os posts recentes gerais apague o trecho marcado em vermelho no CÓDIGO JAVASCRIPT.

3- Caso seu template não seja responsivo você ainda assim pode usar esse slide e inclusive pode configurar seu template para exibir o slide na versão mobile.
Clique no link abaixo para ver como é simples fazer isso:


E terminamos!
Se você tiver alguma dúvida que não tenha sido sanada no tutorial diga nos comentários e eu ajudo se for possível.
E não esqueça de curtir ou compartilhar o post!
Me ajuda muito, muito!!!





33 comentários via Blogger
comentários via Facebook

33 comentários:

  1. Elaine, suas dicas estão bombando, continue mantendo o foco nessas palavras chaves que só dá você nas tops pesquisadas do google rsrs... Nunca comentei, porém sempre te acho nas pesquisas do google, amo blogueiros/a que utilizam a plataforma do blogger e que realmente sabem se esforçar nas técnicas de SEO, estou adorando suas dicas e tutoriais...

    ResponderExcluir
  2. Boa tarde. Passando, lendo, vendo, apreciando, gostando, e deixando votos de um Natal Muito feliz, extensivo a toda a família e amigos.
    .
    hoje: *Teus lábios, de amor, queimando*
    .

    ResponderExcluir
  3. Olá Elaine, coloquei este recurso no meu blog e ficou bom com excessão de uma caixa branca no meio da imagem. Sabe me dizer como excluir esta caixa branca e deixar apenas a imagem?
    Obrigado!

    ResponderExcluir
    Respostas
    1. Eu não testei mas voce pode experimentar trocar o comando background: #fff; por background: transparent;

      Excluir
    2. Legal, deu certo.

      Você poderia me dizer qual é a lógica para aparecer o título acima da caixa onde tá escrito "leia o post"? Ficou bom mas tem alguns títulos que aparecem no slide que não condizem com a imagem. Será que ele puxa dos marcadores? Tem como eu tirar aquele título e deixar apenas a caixa escrito "leia o post"?

      Excluir
    3. Sim, vc pode tentar definir a cor dos marcadores como transparent mas eu acho que seu título não aparece porque seu slide está posicionado na seção Entre colunas.
      O ideal é posicionar abaixo do header... está aparecendo só o marcador, sendo que se posicionar certo vai ficar como em meu exemplo.

      Excluir
    4. É que o template que uso não me deixa posicionar abaixo do cabeçalho.
      O que queria descobrir é qual critério ele usa pra selecionar o título, por exemplo, tem um post sobre a Tesla e uma imagem da empresa mas o texto que aparece é "Apple". No outro tem a imagem de um drone mas aparece escrito "ANAC". Eu queria tirar esse testo e deixar só a caixa "leia o post".

      Eu acho que é esta parte que faz aparecer o texto, confere?

      .post__description p a {
      color: #fa9ab3;
      font: normal normal 13px 'Rock Salt', sans-serif;
      font-size: 13px !important;
      text-transform: none;
      letter-spacing: 4px;
      }
      .post__description p a:hover {
      color: #000;
      }
      .post__description h2 a {
      color: #000;
      }
      .post__description h2 {
      margin-bottom: 2px;
      padding-top: 10px;
      font: normal normal 22px 'Montserrat', sans serif;
      font-size: 22px !important;
      line-height: 1.5;
      text-transform: none;
      letter-spacing: 3px;
      }
      .post__description h2:hover {
      color: #fa9ab3 !important;

      Excluir
    5. Sim, é por aí.
      Tem que ir testando.
      Uma dica é mover o slide para cima da área dos posts e ver como fica.
      Ele captura o título sim, o seu não aparece por estar o slide no lugar errado, Entre colunas.
      Por isso só aparece o primeiro marcador de cada post

      Excluir
    6. Mudei pra cima da área de posts e agora os títulos aparecem certinhos mas ainda ficam aparecendo alguns dos marcadores antes do texto.

      Peço desculpas se estiver perturbando mas achei suas dicas excelentes e até agora você foi a que fez posts mais fáceis de serem aplicados.

      Excluir
    7. Sabe qual é o comando pra deixar a caixa com 50% de transparência?

      Excluir
    8. Nesse slide isso não é possível.

      Excluir
  4. oi amore, queria subir ele mais para cima, como faço isso ...

    ResponderExcluir
    Respostas
    1. Bell, ele aparece tão embaixo porque há muito espaço sobrando entre ele e seu logo. Reduza o espaço e ele subirá.
      bjsss

      Excluir
  5. Olá, seu tutorial me ajudou DEMAIS! O primeiro que realmente deu certo e que eu gostei do resultado. Muito Obrigado, seu trabalho é extraordinário :)

    ResponderExcluir
    Respostas
    1. Marcos, obrigada pelo feedback. Eu ainda não havia testado em templates nativos responsivos Blogger, então obrigada por usar e confirmar que funciona!

      Excluir
  6. Olá Elaine! Como posso alterar o tempo de transição do slide? Está rápido demais. :/

    ResponderExcluir
    Respostas
    1. Olha, você pode tentar, no código javascript, nos trechos que aparecem 500ms alterar para mais ou para menos, mas eu não testei. Acho que a transição não pode ser lenta demais senão ninguém verá mais que uma imagem...
      Mas faça testes, se der certo nos diga...
      bjssss

      Excluir
  7. elaine e se eu quiser deixar so os post recentes?

    ResponderExcluir
    Respostas
    1. Tem jeito sim, releia o tutorial, no finalzinho tem as dicas extras que explicam como fazer isso :)

      Excluir
  8. Oi!! No meu não aparece as setas para frente e para trás. Help!! Obrigada :)

    ResponderExcluir
    Respostas
    1. Sara, qual seu blog? Sem ver não tem como ajudar, seu perfil é bloqueado....

      Excluir
  9. Você poderia me ajudar?

    Gostaria de que o slide apresentado ficasse igual a este http://www.remington.com.br/

    Talvez só fazer uns ajustes no tamanho. Mas como faço para deixa-lo do mesmo tamanho ou que se ajusta automaticamente?

    ResponderExcluir
    Respostas
    1. Vinicius, esse é outro slide, não tem como deixar igual.
      Seriam outros códigos, outra formatação...
      Aqui no blog tem um slide de destaques responsivo, talvez você consiga adaptar:
      https://www.elainegaspareto.com/2018/01/slide-de-destaques-responsivo-para-blogs.html

      Excluir
  10. Você me salvou!!! Passei dias testando vários outros e o que veio com o tema que comprei não funcionou, tentei suporte com o criador e nada. Que alívio... <3

    ResponderExcluir
  11. Olá Eliane, estou eu configurando o template Noelle no meu blog oficial e qual minha surpresa?? O comportamento no blog de testes é diferente no oficial. O meu logo em png ficou desfocado e enorrrme... Ao baixar o template, o slide apareceu automaticamente (isso não aconteceu no de testes e estranhei porque no tuto aparecia...), mas só que aparece com uma imagem fixa e não as imagens do post. Se puder dar um help no slid... Desde já obrigada

    ResponderExcluir
    Respostas
    1. Regina, releia o tutorial do slide, com certeza vc esqueceu algum detalhe...
      Quanto ao logo precisa alterar o valor na área do cabeçalho, para o tamanho exato do seu logo. No post onde ensino sobre responsividade explico isso, tá na Série Como tornar responsivo um template nativo do Blogger...

      Excluir
  12. Oi Elaine, não expliquei bem o que aconteceu com o slide. Ao baixar o Noelle no blog oficial - ele entrou automaticamente -, só que aparecendo uma imagem fixa. Depois de reler, percebi que faltoU o HTML/JAVASCRIPT, mas ao adicionar ficam 2 slides! (https://reginabomfim.blogspot.com.br). No blog de testes, o slide não apareceu, tive que configurá-lo e deu ok. Suponho, no meu mui poco conhecimento que talvez o problema todo é o template Simple (o que estava antes). O Noelle tem como base o Viagem. Meu blog é basicão de tudo. Não estou conseguindo enxergar onde estou errando. Grata.

    ResponderExcluir
    Respostas
    1. Regina, pra mim tá normal, só a data dos posts que precisa ser ajustada no formato correto. Slide funcionando, tudo ok.
      Deu certo afinal?
      bjssss

      Excluir
  13. Elaine, fiz as alterações que pediu lendo o tuto da responsividade e deu certo. Só que lendo o tutorial de como editar o cabeçalho, entendi que usar apenas a imagem em PNG prejudica o blog sob o ponto de vista do SEO. Minha proposta de logo é bem simples, queria que ficasse até menor do que ficou (fiz no Paint). Não estou conseguindo entender o modo como trabalha com o cabeçalho nessas duas etapas. Vou continuar tentando até entender. Grata se puder me orientar.
    (meu blog de testes: https://deliciadeideias.blogspot.com.br)

    ResponderExcluir
  14. Gostaria de saber se tem como deixar ele da largura máxima do blog?

    ResponderExcluir
    Respostas
    1. Dankelvis, ele é responsivo, portanto vai sempre assumir a largura útil da área onde for inserido.
      Se vai ocupar a largura total da página depende de seu template.
      No template de testes a área útil é aquela, se fosse aqui em meu blog seria a largura total de fato, portanto depende de seu template...

      Excluir

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…