Slide de postagens recentes- modelo responsivo

em 1 de setembro de 2015

Eu já ensinei aqui no blog alguns modelos de slides, relembre:


Hoje quero compartilhar contigo este modelo, que é um dos mais bonitos que consegui adaptar para o Blogger.
Veja:

Demonstração do slide de posts recentes 

Ele é responsivo, o que significa que ele assumirá a largura da área onde for colocado.
Se colocar acima da área do post ele assumirá o tamanho dessa área; se o colocar na sidebar ele ficará da largura da sidebar, e se o inserir abaixo do menu ele ficará da largura total do blog.

A instalação é bem simples, apenas três códigos, sendo que a maior dificuldade é a personalização.
E mesmo isso é muito fácil, trata-se apenas de trocar cores e fontes, caso queira.
Se não mexer em nada o resultado será exatamente como em minha demonstração.
A única alteração indispensável é colocar o endereço completo de seu blog no campo destacado no terceiro código, o Código HTML.
Vamos aprender?


Dicas preciosas para evitar erros


→ Para começar a dica de ouro é: faça antes em um blog de testes que tenha exatamente o mesmo template de seu blog real.

→ Leia o tutorial inteiro antes de começar. E leia o código, especialmente o primeiro código, o que comanda a aparência do slide, o código CSS.
Repito: leia o código até entender; faça testes até achar o que deseja, mexa, revire, faça com dedicação e paciência.


Instalando o Slide de postagens recentes


Vá ao painel de seu blog e clique na aba Modelo. A seguir clique em Editar HTML.
Dentro da caixa de códigos tecle Ctrl+F e na barra de busca que aparecer digite ]]></b:skin>.
Tecle Enter para localizar.
Acima disso cole o código CSS:

Copiar o código CSS

Este é o código que define cores, fontes, a aparência geral do slide.
Deixei marcado emCAPSLOCK todas as áreas que acho seguro você editar.
Ajuste as cores para combinar com seu blog, ajuste as fontes se desejar, etc.
Feito isso, salve.

Agora, dentro da caixa de pesquisa digite </head> e tecle Enter.
Acima dessa tag cole o código JAVASCRIPT:

Copiar o código JAVASCRIPT

Salve a alteração.
Uma dica importante: caso seu blog já tenha a chamada JQuery apague a primeira linha do código pois não é preciso ter 2 chamadas Jquery no mesmo template.

Agora vamos instalar de fato o slide.
Vá ao seu painel do blog e clique na aba Layout (Deseño em espanhol, ou Esquema, em português de Portugal).
Clique em Adicionar um gadget e escolha a opção HTML/JAVASCRIPT.
Cole dentro da caixa que expandir o código HTML:

Copiar o código html

No campo destacado em azul coloque, claro, o endereço completo de seu blog.
Salve, arraste para onde deseja que fique e salve a alteração.
Se tudo deu certo seu slide está pronto.


Fiz tudo conforme o tutorial e não deu certo, o que houve?

Não há como eu saber pois cada template possui características próprias.
Podem ter acontecido algumas dessas coisas:

  • Seu blog possui excesso de scripts e eles causaram conflito com o slide; Nesse caso precisa descobrir a causa do conflito e elimina-la se possível;
  • Você pulou alguma parte, inseriu algum dos códigos no lugar errado ou apagou alguma aspa, sinal ou comando sem querer. Refaça tudo para se certificar;
  • Seus feeds precisar ser ativos e seu blog precisa ser público;
  • Você colocou o endereço de seu blog de forma incorreta ou incompleta;
  • Seu template não assume o slide, e nesse caso não há o que fazer, a menos que troque de template;
  • Já existe algum slide em seu blog? Não pode ter outro além desse.


Tutorial completo, longo mas bem simples de seguir. Leia com atenção, faça com paciência.
Acredite em mim, fazê-lo vai demorar bem menos do que você imagina, e certamente bem menos do que eu demorei para traduzir os comandos, interpretar o código, adaptar ao Blogger, testar em 4 templates nativos diferentes montar o tutorial :)


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.

26 comentários , comente também!

  1. Elaine!!!! Era meu sonho de consumo!!!! Vc leu meus pensamentos!!! kkkkkkkkk
    Sempre via em alguns blogs slides como este que vc publicou!!! Meus "pobremas si acabaram si"!!!! kkkkk
    Beijos querida!!!! Vc como sempre arrasa!!!

    ResponderExcluir
    Respostas
    1. Tuca, é isso aí, eu leio pensamentos rsrsrsrsr
      beijossss

      Excluir
  2. Elaine, houve um problema ! O slide não de adequa ao tamanho do gadget, daí fica completamente desproporcional. E isso ocorre em qualquer gadget. Ficaria extremamente agradecido se você pudesse me ajudar ! Agradecido desde já !!

    ResponderExcluir
    Respostas
    1. Elaine, percebi que o problema não é o seu tutorial, mas sim alguma configuração do meu blog. Tentei instalar os slides de apresentação, que estão presentes nos gadgets, e o problema continuou: Tamanhos desproporcionais, com imagens muito grandes que ultrapassam os limites. Se você souber corrigir este problema, por favor, me responda. Agradecido desde já !!

      Excluir
    2. Infelizmente não, como disse no tutorial cada template tem características próprias...

      Excluir
  3. Muito interessante e bonito. Porém como já tenho dito, sou um calhau com olhos, nesta coisa de html. Tenho sempre medo de fazer asneira.
    Um abraço

    ResponderExcluir
    Respostas
    1. Elvira, faz num blog de testes, até perder o medo rsrsrs
      beijosss

      Excluir
  4. olá, adorei o Post.

    já te sigo e te adicionei ao meu blog.

    queres seguir-me também: http://caraanjo.blogspot.pt/

    ResponderExcluir
    Respostas
    1. Muito obrigada, Fatima, por seguir o blog!
      beijossss

      Excluir
  5. Elaine, como sempre você arrasou. Vou esperar a correira do aniversário da Aimê passar e depois vou tentar instalar o slide.
    Obrigada pelas dicas.
    bjk

    ResponderExcluir
  6. Amei ♥ Já instalei!!! Uhulll


    www.planetadablogueira.com


    Beijos

    ResponderExcluir
  7. Sem dúvida é o blog que mais me ajuda com funcionalidades para o meu blog! Novamente parabéns Elaine e muito obrigada.
    Samanta Santos - Ateliê Fawkes

    ResponderExcluir
  8. Seus tutoriais são ótimos. Parabéns !

    ResponderExcluir
  9. Eu queria saber se tem como aumentar o número de postagens. Abraço.

    ResponderExcluir
    Respostas
    1. Bom dia Luan. Para aumentar o número de postagens você tem que achar no último código essa linha aqui:

      MaxPost:10, /*--QUANTIDADE DE POSTS EXIBIDOS--*/

      Depois é só modificar o Número 10 pela quantidade de postagens que você deseja tem em seu Slide de Postagens. Espero ter ajudado. Abraço.

      Excluir
    2. Elaine, seus posts são sensacionais!
      eu tenho uma dúvida: como eu faço para colocar esses slides entre postagens na página inicial do blogger?
      se poder me responder agradeço!

      Excluir
    3. Jade, entre postagens requer um conhecimento em html para converter o código e inserir no código fonte do blog.
      Nunca testei, até porque não dá pra inserir mais de um slide, eu acho...
      Nunca testei, não sei se é possível.

      Excluir
  10. Olá Elaine Gaspareto,

    Primeiramente agradecer por nos proporcionou uma postagem que ajudou não só ao meu blog como o de muitos, está e parabéns.

    Agora, nós queríamos saber se tem como colocar nesses slides postagens variadas, não somente as recentes, mas também antigas, aleatórias.

    Agradecemos novamente pelo excelente trabalho,

    Abraços,

    Equipe BioOrbis.

    ResponderExcluir
    Respostas
    1. Nesse slide só dá pra ser assim, posts recentes.

      Excluir
  11. Oi Elaine tudo bem? fiz o tutorial tudo certinho e o slide aparece, mas não fica organizado as imagens ficam uma abaixo da outra, não entendi o por que. Pode me ajudar?

    ResponderExcluir
    Respostas
    1. Como seu blog foi modificado por ser que algum script esteja causando o conflito, não tenho como saber...
      Minha dica é testar em um blog sem nenhum outro gadget até descobrir o motivo...
      bjsss

      Excluir
  12. Para mim o que ocorreu foi ficarem alinhados todos e irem mudando a posição da imagem
    Alguma coisa em conflito pena pois ameis o modelo responsivo bjks

    ResponderExcluir
  13. Tem como alterar o tempo de transição? Pra, tipo, trocar de postagens mais rápido?

    ResponderExcluir
    Respostas
    1. Sim.
      Localize no código HTML o trecho interval:10000, e altere até ficar como deseja.

      Excluir
  14. Não aparece nada...
    o que sera que fiz de errado?!

    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…