Slide de postagens recentes simples e fácil de instalar

em 3 de novembro de 2015


Há, aqui no blog, uma subcategoria dedicada especificamente aos slides.
Veja:
Slides para blog, várias opções e modelos diversos

Há vários modelos, e hoje quero mostrar este, que inseri em um dos blogs que personalizei:


Demonstração do tutorial


Ele é muito simples de instalar, é relativamente leve e bem fácil de ser personalizado.
Vamos aprender?

Para começar você precisa acessar o painel administrativo de seu blog e clicar na aba Modelo.
A seguir clique em Editar HTML e dentro da caixa de código que abrir tecle Ctrl+F.
Na barra de busca que expandir digite ]]></b:skin> e tecle Enter para localizar.
ACIMA disso cole este código CSS:


Copiar o código CSS


Este é o código CSS, que basicamente define a aparência do slide, coisas como cor, fonte, tamanho, etc.
LEIA esse código, ele te dirá o que pode ser alterado.
Marquei em CAPSLOCK tudo que pode ser alterado, e deixei em pink o endereço das setinhas caso queira trocar.
As "bolinhas" podem ter as cores alteradas, as fontes do slide podem ser trocadas, a cor de fundo geral, cor de fundo dos títulos, etc...
Não altere nada além do que deixei marcado em capslock, ok?

Feitas as alterações, clique em Salvar.
Agora vamos ao segundo passo, que é colocar os scripts que fazem o slide rodar.

Ainda no código fonte, dentro da barra de busca, digite </head> e tecle enter para localizar.
ABAIXO  disso cole este segundo código, o Código JAVASCRIPT:


Copiar o código JAVASCRIPT



Salve.
Ainda não vai aparecer nada, calma.
Depois você poderá voltar e editar essa parte, trocar cores e fontes. Mas antes precisa fazer o slide aparecer, correto?

Vamos instalar o código HTML/JAVASCRIPT que faz o slide funcionar.
Vá até o painel do seu blog, clique em Layout e a seguir clique em Adicionar um gadget.
Escolha a opção HTML/JAVASCRIPT e dentro da caixa que abrir cole este código HTML:


Copiar o código HTML



Onde está escrito ENDEREÇO COMPLETO DE SEU BLOG coloque, claro, o endereço de seu blog, sem esquecer o http.
Onde marquei em vermelho é a quantidade de posts a serem exibidos. Altere como desejar, lembrando que quanto mais posts mais tempo leva para carregar.

Salve seu gadget, arraste para onde deseja que fique (eu sugiro abaixo do header, abaixo do menu ou acima da área de postagem como em meu exemplo) e salve a alteração.

Se tudo deu certo e se seu blog não apresentar nenhuma incompatibilidade com os códigos do slide o resultado será exatamente como em meu exemplo.

Fiz tudo e não apareceu nada, o que houve?


Não tem como eu saber, caso a caso é impossível. Cada template é diferente do outro, tem outros elementos de página, etc.
Vou dar dicas que notei enquanto testava.


  • Se o blog tem mais algum gadget ou widget que usa JQuery o slide não funcionará.
  • Se há excesso de elementos com animação o slide não funciona.
  • Há um aparente conflito com alguns tipos de menu que usam JQuery, então faça o teste antes.
  • Templates baixados da internet em geral não aceitam esses slides. Teste em um template nativo do Blogger. Eu testei em 4 diferentes, todos deram certo. Meu exemplo é um dos modelos Travel/Viagem.
  • Aliás, essa é a dica de ouro: teste antes em um blog de testes que use um template  igual ao seu blog real. Teste, modifique e só depois insira em seu blog real.


Espero que você aproveite o tutorial, faça para aprender, para estudar.
O slide é vantajoso em relação aos demais por ser mais personalizável e não deformar as imagens.
Foi um trabalho grande montar esse passo a passo, mas vale a pena porque você, querido leitor, merece.
Então, vale a pena qualquer trabalho.
Sempre...

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

15 comentários , comente também!

  1. como eu faço pra eu escolher as postagem que devem aparecer no slid?

    ResponderExcluir
  2. Oi Elaine! Obrigada pela dica. Eu tenho dois blogs para usar como testes, rs. Experimento neles antes de colocar no meu. No primeiro não funcionou, fiz algo errado, mas tentei novamente e deu tudo certo! Só tenho que alterar algumas coisinhas agora. Muito obrigada pela sua dica! Super valiosa. Vou dar mais uma olhada no seu blog para ver o que mais posso usar para personalizar o meu. Parabéns por compartilhar estas coisas!

    Um beijo e sucesso!

    Ah, depois passa no meu para ver como ficou :) www.batomnosdentes.com

    Beijos!

    ResponderExcluir
  3. Socorro!
    Baixei um template pro meu com slide de posts recentes embutido. Bem, não aparece nenhuma das postagens. Acreditava que era devido ao feed, mas coloquei o endereço do feedburner e continuou não funcionando. O que você acha que pode ser, Elaine?

    ResponderExcluir
  4. No caso, o blog é esse: http://ouniversoleitor.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Claudia, na pasta em que veio seu template deve ter um arquivo que explica como acionar o slide.
      Como é um template baixado da internet não tenho como dizer, mas em geral as informações vêm na pasta...
      bjssss

      Excluir
  5. Eu tentei mudar a altura dele mas não consegui. o que devo fazer?

    ResponderExcluir
  6. Elaine, boa tarde...
    Fiz o que você explicou no post masalguma coisa deu errado. E agora? Como faço para reverter isso? Desde já agradeço.
    http://meudiariodobemestar.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ana Paula, se algo deu errado exclua todos os códigos que instalou e salve, o seu template voltará ao que era.

      Excluir
  7. Conseguiiiiiiiiii...ebaaaaaa... Só não consegui diminuir as bolinhas, mas está lindo. Adorei. OBRIGADA.

    ResponderExcluir
  8. Boa Noite Elaine, eu estou atrás de um tutorial que ensinasse a colocar um slide, mas todos que eu tento não funcionam, e o seu até que funcionou, mas...eu não sei em que parte eu diminuo o tamanho das bolinhas.
    As bolinhas ficaram enormes :( e eu não sei em que parte do código eu arrumo.

    ResponderExcluir
    Respostas
    1. Gabi, ache esse trecho no código CSS:
      .flex-control-paging li a {
      width: 11px;
      height: 11px;
      E altere 11px por um valor menor.
      bjsss

      Excluir
    2. Elaine, eu fiz isso mas as bolinhas continuam grandes, e sabe a setinha?Quando passa o mouse em cima da setinha ela dá um "bugue"tipo, ela sobe e desce, e não deixa eu clicar :(

      Excluir
  9. Boa tarde.
    tem como colocar o texto na parte de baixo da imagem?

    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…