Postagens recentes com efeito fade

em 19 de agosto de 2015

Postagens recentes com efeito fade

Eu já mostrei aqui no blog algumas opções de gadgets de postagens recentes.
Relembre:

http://www.elainegaspareto.com/2015/03/galeria-posts-recentes.html

http://www.elainegaspareto.com/2015/08/galeria-multi-postagens-separadas-por-marcador.html

Hoje quero mostrar essa, que é muito legal e cheia de estilo.
Veja:

Demonstração do tutorial


Ela é quadrada, ideal para quem pediu o efeito fade ocupando a imagem toda, tem a opção de listar automaticamente seus posts recentes ou à partir daquele que você desejar.
A instalação é muito simples e para modificar cores, posicionamento e tamanho das imagens basta um pouco de paciência, dedicação e conhecimento básico em CSS.
Vamos instalar?

Para começar copie este código:

Copiar o código


Agora vá ao painel administrativo de seu blog e clique na aba Layout (se estiver em Portugal é a aba Esquema, e se estiver em país de língua espanhola é Diseño).
A seguir clique em Adicionar um gadget e escolha a opção HTML/JAVASCRIPT.
Dentro da caixa que expandir cole o código copiado.
Se não alterar nada o resultado será exatamente como na minha demonstração.
Porém, é quase certo que precisará ajustar para que se encaixe em seu template.
Então preste atenção, tá?

Como personalizar o gadget



  1. Deixei marcado no código (em letras maiúsculas) as áreas editáveis. Leia o código, ele te dirá o que fazer.
  2. Deixei marcado em pink o tamanho das imagens, em 280. Aumente para imagens maiores, diminua para imagens menores.
  3. Em azul eu marquei o post de onde começa a exibição, ou seja, desde o primeiro post mais recente.Se preferir altere esse número, se colocar 3 por exemplo significa que o gadget vai exibir os posts recentes à partir do 3º post de seu blog.
  4. Em verde eu marquei a quantidade de posts exibidos, altere como preferir.
  5. Vamos supor que você exiba em seu blog 4 posts na página inicial. Pode configurar o gadget para exibir os posts recentes à partir do 5º post.
  6. Não precisa nem colocar endereço de seu blog! O gadget vai capturar automaticamente. Demais, né?
  7. Seu blog precisa ser público, ter postagens e claro, ter os feeds ativados.

Terminou de personalizar?
Salve, arraste para onde deseja que fique (eu sugiro abaixo do cabeçalho ou do menu), salve as alterações do layout e pronto!

Leia e releia tanto o tutorial quanto o código, e com certeza dará certo!
Quer ver mais dicas para deixar seu blog lindo?
Acesse:


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. Olá, eu fiz tudo dá forma como você falou em meu blog de testes, e nem sequer alterei alguma coisa, mas as postagens recentes não aparecem. O Gadget está lá, mas as postagens não aparecem nele.

    ResponderExcluir
  2. Adorei! Só não sei como colocar baixo do meu menu, que já é um gadget... vou pesquisar para tentar instalá-lo. Obrigada pelas dicas sempre muito úteis!

    ResponderExcluir
  3. Tutorial muito com certeza vai ajudar bastante nos layouts de agora pra frente, curto muito seu blog sempre me ajuda no que eu preciso abraços.

    www.avidadoguh.com

    ResponderExcluir
  4. Olá boa noite,adorei sua postagem,e já acompanho seu blog há um tempo,tento colocar em pratica tudo que você ensina,acho você muito inteligente e generosa,pois sempre compartilha com todos novos códigos html e dicas para blog,entre outras coisas,seu blog e demais e adoro ler suas postagens,e montei meu blog com suas dicas e já estou até ajudando outras pessoas que também não entende desses códigos,caso queira visitar o meu blog ficarei muito feliz beijos.
    http://divadeatitude.blogspot.com.br/

    ResponderExcluir
  5. Oieeee, te levei para o meu blog.... rsrsr coloquei o seu ícone lá nos meus blogs parceiros.... ;*

    http://rotinapratica.blogspot.com.br/

    ResponderExcluir
  6. Adorei esse tutorial, tava muito louca atrás, mas infelizmente não deu certo, vou tentar separar o CSS e coloca-lo lá no modelo. Se der certo voltarei aqui :)

    ResponderExcluir
  7. Oi! No meu as imagens ficam desfocadas :( Como posso resolver isso?

    ResponderExcluir
  8. Oi Elaine,
    Eu fiz no meu blog, foi super fácil! Obrigada pela ajuda.
    Beijos

    ResponderExcluir
  9. Não tem como colocar só 3 postagens? veio 4 :c

    ResponderExcluir
  10. Olá! adorei a dica! Mas tem como colocar 'Postagens mais populares' ao invés de 'Postagens recentes'?

    ResponderExcluir
  11. ao invés de colocar ultimas postagens, tem como selecionar a postagem que eu quero nessa barra? como no Blog Depois dos Quinze (http://www.depoisdosquinze.com/) lá ela coloca 3 postagens que ela quer e não 3 ultimas postagens do blog! por favor! se você souber como fazer isso, faz um tutorial para nós!?

    ResponderExcluir
    Respostas
    1. Lydiane, nesse script, não.
      Mas eu conheço um, assim que der eu publico.

      Excluir
    2. obrigada!
      nesse código de ultimas postagens, como faço para diminuir a altura do fade? eu coloquei as imagens do tamanho que eu quis mas o slide em fade continua do tamanho que você colocou. Como faço para ficar das minhas imagens?
      Se quiser ver como ficou, do jeito que estou falando, veja no meu blog: http://lilyjardim.blogspot.com.br/

      Excluir
  12. ok! ja achei! eu mudei o valor do
    padding:
    de: 119px 0px 0px 0px;
    para: 73px 0px 0px 0px;
    e o tamanho da altura pra "171"
    ficou do jeit que eu queria!
    obrigada pelos códigos! e eu fucei em tudo e fui testando até dar certo! hahah...

    ResponderExcluir
  13. PARABÉNS!!! ADOREIIII!! VC AJUDA MUITO AS PESSOAS, E ISSO PROVA SUA HUMILDADE. oBRIGADA

    ResponderExcluir
  14. Muito, mais muito obrigada mesmo pelas suas dicas!
    Meu blog ganhou uma cara totalmente diferente e estou amando, simplesmente todas as dicas são muito fáceis, bem explicadas e úteis! Obrigada MESMO!
    Usei sua template rosa pink, coloquei o gadget de postagens recentes...ficou LINDO!
    Quem quiser conhecer e ver como ficou incrível passe por lá:
    http://saltoglossebatom.blogspot.com.br/

    ResponderExcluir
  15. Perfeitoooooooooooooo, Elaine!
    Sonho em ter um layout todo personalizado feito por você, mas enquanto não posso pagar por isso, vou vendo seus tutoriais e ajeitando meu cantinho.
    Você é maravilhosa, sério! Muito, muito, muito obrigada por compartilhar seu conhecimento :)

    ResponderExcluir
  16. Muito obrigada! Meu layout ainda não está perfeito mas com essa dica, melhorou muito! http://meualeatorio.blogspot.com

    ResponderExcluir
  17. Olá. Onde eu altero para deixar um espaço entre os posts?

    ResponderExcluir
  18. Oi, Elaine. Tudo bem?
    Quero começar agradecendo seus tutoriais, tem me ajudado bastante. Obrigado!

    Maaas, eu posso pedir uma coisa?
    Eu gostaria de saber se há como personalizar somente uma página estática no blogger?
    Atualmente tenho uma página principal (davidehz.blogspot.com), mas quero modifica-la, adicionando alguns widgets de posts recentes por categoria e tals, além de fazer uma apresentação e logo no fim, colocar uma aba de redes sociais (que depois de muito esforço consegui desenvolver). A questão é: Tem como fazer essa edição? E como seria, de forma individual através do Editor HTML, colocando-a como uma página separada?


    Agradeço.

    ResponderExcluir
    Respostas
    1. David, tem jeito sim.
      Mas como é bem amplo vou deixar aqui um link que talvez ajude:
      http://www.mundoblogger.com.br/2010/03/aplicar-estilos-as-paginas-estaticas.html

      Precisa ter um conhecimento básico em códigos, e se o template for baixado da internet pode não ficar 100% mas é o caminho.
      O segredo são as condicionais.
      Espero que ajude...

      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…