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!!!
25 comentários via Blogger
comentários via Facebook

25 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

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…