Slide automático de postagens recentes para blog

em 26 de abril de 2016

Slide automático de postagens recentes para blog

Há, aqui no blog, alguns slides para seu blog.
Veja:

Slides diversos para blog


Hoje quero te mostrar esse, que adaptei de um original Worpress:


Demonstração do tutorial



Trata-se do slide de postagens recentes mais fácil de instalar de todos os tempos!
Sério, é muito simples!
E tem outro grande atrativo para esse slide: você pode escolher se ele vai exibir todos os posts de seu blog por ordem de publicação ou pode, se preferir, definir que ele exiba apenas os posts de determinada categoria.
Foi o que fiz em meu outro exemplo: defini que seriam exibidos os posts da categoria Dicas para blogs apenas.
Fica incrível, né?
Vamos aprender?


Instalar slide de postagens recentes no blog


Para começar você precisa definir se deseja exibir todos os posts ou apenas os posts de determinado marcador.
Se desejar exibir os posts recentes por ordem de publicação não precisa alterar nada no código que vai copiar logo mais.

Se, porém, desejar inserir o slide para que ele exiba os posts de determinado marcador (como eu fiz em meu exemplo do blog de Códigos: defini que meu slide mostrasse apenas posts da categoria Dicas para blogs) então substitua, no código, o trecho que marquei em azul por este trecho:




Para copiar selecione o conteúdo da caixinha e copie o conteúdo.
Coloque no local indicado o endereço de seu blog e o nome de seu marcador. Só isso.
Mas se quiser mostrar todos os posts basta copiar o código que vou disponibilizar abaixo e pronto!


Configurando a aparência do slide



Agora vamos ao painel de seu blog.
Clique na aba Layout e na página que expandir clique em Adicionar um gadget.
Escolha a opção HTML/JAVASCRIPT e dentro da janela que abrir cole este código:


Copiar o código


No código estão, e CAPSLOCK, todas as informações acerca das áreas editáveis, como cores e fontes, e tamanhos.
Leia atentamente o código, ele te dirá o que fazer, o que pode ser alterado.

A seguir você precisa escolher as cores que mais combinam com seu blog.
Acesse esse site e selecione suas cores pelo código hexadecimal.

Agora vem a parte mais importante: onde está escrito ENDEREÇO DE SEU BLOG coloque, claro, o endereço completo de seu blog, começando pelo http.
Salve, arraste para onde deseja que o slide fique (o melhor lugar é acima da área dos posts) e salve as alterações do Layout.
Veja se está ok em seu blog.
Se tudo deu certo o slide estará aparecendo e exibindo seus posts na ordem em que foram postados, sejam todos os posts seja por categoria.


Fiz tudo e não apareceu o slide


Muitas podem ser as razões para não dar certo.
Leia o tópico abaixo, talvez a sua solução esteja nele!

  1. Verifique se seu blog é público, se tem os feeds ativados e se a distribuição do feed é completa (Sinopse ou Até jumpbreack não dá certo) e se colocou o endereço do blog no lugar correto, sem apagar as aspas e começando com http.
  2. Verifique se o endereço do blog está correto, se não esqueceu nada. Muitas vezes esquecemos uma letrinha e aí não dá certo mesmo.
  3. Caso seu blog possua outro slide pode haver conflito e nesse caso é questão de escolher qual deseja manter.
  4. Outra possibilidade é que seu blog já tenha a biblioteca JQuery instalada. Aí precisa excluir, no código do slide, esse trecho: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
  5. Seu blog precisa ter posts, claro, e esses posts precisam ter marcadores inseridos.
  6. Verifique se não tem nenhum outro gadget ou hack que possa conflitar com o slide. Para tirar qualquer dúvida tente instala-lo em um blog de testes, como eu fiz no meu exemplo.

    Uma última dica: leia e releia, tanto o tutorial quanto o código em si, até se certificar de haver entendido tudo.
    Daí é só ter paciência, dedicação e um bom tanto de prática pra conseguir sem erros!
    Acredite: nem sempre a gente consegue de primeira...

    Enjoy!

    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.

    25 comentários , comente também!

    1. Olá Elaine,deu certo!!! Só não consegui ajeitar a largura, mas já gostei do resultado!!! Super obrigada e muito sucesso pra você. Bjs e tenha uma linda semana!

      ResponderExcluir
      Respostas
      1. #prevBtn, #slider1prev{left:-30px !important;}
        #nextBtn, #slider1next{left:630px !important;} no meu blog, eu estava com dificuldade em ajustar as aquelas barras de next e prev... então ajustei com essta parte do codigo... veja aqui allmusicstar4ever.blogspot.com

        Excluir
    2. Incrível, Elaine. Você sempre nos surpreendendo e agraciando com seus conteúdos excelentes.
      Olha, vou te contar que abri um sorrisão quando vi que você tinha me adicionado no G+, e um maior ainda quando seguiu meu blog!
      Espero que não tenha infringido nenhuma regra em relação ao uso do template e dos tutoriais, rs. Não que você precise de divulgação em um blog pequeno como o meu, porque seu blog já é um sucesso, mas com certeza vou linkar diversas coisas que encontro aqui e que são super úteis. Mais uma vez e sempre, muito obrigada por compartilhar seu conhecimento ♥

      ResponderExcluir
      Respostas
      1. Kemmy, eu que agradeço, especialmente a divulgação.
        Ajuda demais, pode crer!
        beijossss

        Excluir
    3. Otimo post!

      www.sempremorenaantenada.blogspot.com

      ResponderExcluir
    4. Poxa o meu funcionou, mas só ficou aparecendo o primeiro post, não ficou passando o slide, sabe como resolver?

      Dany Guimarães| Legalmeente Ruiva | Legenda da Trindade
      www.legalmeenteruiva.com

      ResponderExcluir
    5. Eu não consegui ver este modelo mas estou procurando se tem o tutorial do slide que fica acima deste vermelho. Um que, ao passar o mouse, fica rosinha. Eu amo e queria usar aquele. Quero trocar o do meu blog por um modelo mais moderno.
      Beijos e bom FDS!

      ResponderExcluir
      Respostas
      1. Vera, tem tutorial aqui no blog, não lembro o nome, mas tem.
        Dá uma olhada na categoria dicas para blogs, é do ano passado, eu acho :)
        bjssss

        Excluir
    6. Fiz tudo certinho mas não deu certo só apareceu a primeira postagem e o fundo vermelho sendo que eu coloquei apenas tons de rosas e não tem seta, se puder resolver te agradeço.

      ResponderExcluir
      Respostas
      1. Meninas, não tenho como ajudar porque não sei exatamente o que vocês fizeram, não conheço os códigos dos seus templates e nem sei quais scripts já haviam neles.
        Sugiro relerem o tutorial, e ver se seguiram os passos certinho.
        Também experimentem em um blog de testes limpo.
        É assim, tentar até achar o ponto de ajuste.
        bjssss

        Excluir
    7. Elaine de Deus!!! Gostei muito do slide automático e já coloquei no meu blog, estou ensaiando voltar a blogar e comecei por essa mudança legal no visual. Obrigada!!!

      ResponderExcluir
    8. no meu caso eu nao quero que ele apareca automatico eu quero por um slide definido tem com ?

      ResponderExcluir
      Respostas
      1. Tayenne, esse slide, não.
        Mas tem outros aqui no blog que são de destaques, veja na categoria Slides...
        bjsss

        Excluir
    9. Fiz o tudo certinho, mas só aparece uma tela verde. Não aparece nehum post e nem nada, só um quadrado (espaço do slide) verde :(

      ResponderExcluir
      Respostas
      1. Nicoly, não pode ter outro slide no blog, e nem muitos scripts JQuery, senão causa conflito.

        Excluir
    10. Amei esse slide e uso faz algum tempo!
      Mas, recentemente ele parou de funcionar.
      Creio que seja problema no servidor onde foi hospedado o código...
      Você tem os arquivos?

      ResponderExcluir
      Respostas
      1. Maxwell, recoloque os códigos, eu hospedei de novo os arquivos.
        E recomendo que você baixe os scripts, salve e hospede em uma conta sua, e aí troque os endereços dos arquivos.
        Assim evita que eles saiam do ar por excesso de tráfego.

        Excluir
      2. Fiz o recomendado, mas acho que não consegui ou errei ao fazer. Existe algum tutorial aqui explicando? Acessei os 2 endereços que terminam com '.js' e baixei em 'salvar como...', fiz upload pelo Drive, Dropbox e 4shared. Mas, os links que eles compartilham parecem não servir para leitura do código. Aparecem apenas como download. O que posso fazer? Somente os seus funcionam, mas acabam ficando fora do ar por excesso de tráfego. Desculpe, mais uma vez, o incômodo...

        Excluir
      3. Maxwell, ao salvar os arquivos precisa lembrar de salvar na extensão .js
        Se não fizer isso eles serão apenas texto e não servirão...

        Excluir
    11. elaine, eu queria retirar as setas laterais, pois como aumentei o tamanho do slide as setas ficaram fora do enquandro do slide, e pelo fato que eu aumentei o tamanh do slide para 1460px x 450px as imagens estão bem pequenas, como faço para as imagens ficarem do tamanho do slide?

      ResponderExcluir
      Respostas
      1. Gabrielle, para retirar as setas apague o endereço delas.
        Assim:https://lh5.googleusercontent.com/-j28HsFjcG30/VV3dCV-DpdI/AAAAAAAARdA/TgQMuUyFkpE/s64-no/arrowleft.png
        e
        https://lh3.googleusercontent.com/-pyCcEr7m8OU/VV3dCYWdUKI/AAAAAAAARdE/nkwTgozDdYg/s64-no/arrowright.png

        bjssss

        Excluir
    12. Elaine, fiz as alterações de cores de acordo com o meu blog e o slide parou de funcionar e o carregamento da página ficou pesado. Ai, estava tão feliz...rsrs. O slide modelo responsivo mais recente que deu, funcionou no blog de testes e não no oficial. O slide do blog de testes é que gosto mais, na verdade. Beijos se puder me dar um help (http://reginabomfim.blogspot.com.br)

      Recentemente fiz um backup de postagens que não era pra fazer. Era pra fazer só do Template. Aff ainda aprendo.

      ResponderExcluir
      Respostas
      1. Regina, eu não sei o motivo de não funcionar, não tenho como saber.
        Cada template tem características próprias, e também pode ter algo que esteja causando conflito.
        Sobre a página ficar mais pesada, sim, fica mesmo, pois tudo que colocamos no blog tem um peso
        Então, é questão de optar sempre :)

        bjsssss

        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…