Mostrar Post Recomendado ao Rolar (Descer) a Pagina do Blog

Colocar no blog um gadget que faz aparecer a indicação de uma postagem recomendada ao usar a barra de rolagem para chegar ao final do blog. Isso pode ajudar a conseguir que os visitantes fiquem mais tempo no seu blog da mesma forma que usar gadgets do tipo: Postagens Populares ou lista com postagens mais compartilhadas em redes sociais ajudam a fazer as pessoas visitarem mais paginas do seu site. O funcionamento do código é bem simples e mostra no canto da pagina um slide com um post do blog como sugestão ao rolar a pagina do seu blog.

slides com postagem recomendado ao rolar a pagina do blog

Entre na pagina layout clique em adicionar gadget, escolha a opção html/javascript e cole o código abaixo:
<div id="hlslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Leia também</p><div id="hlslidein_image"></div> <div  id="hlslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof hl_onload_queue=='undefined')var hl_onload_queue=[];if(typeof hl_dom_loaded=='boolean')hl_dom_loaded=false;else var hl_dom_loaded=false;if(typeof hl_async_loader!='function'){function hl_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(hl_dom_loaded){newcallback()}else hl_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof hl_domLoaded!='function')function hl_domLoaded(callback){hl_dom_loaded=true;var len=hl_onload_queue.length;for(var i=0;i<len;i++){hl_onload_queue[i]()}}hl_domLoaded();hl_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){hl_async_loader("http://helplogger.googlecode.com/svn/trunk/Recommended Post Slide Out For Blogger Blogspot.js",function(){},"hl-out-slide")},"jQueryjs")}</script> <a href="http://helplogger.blogspot.ro/2012/06/recommended-post-slide-out-widget-for.html" target="_blank"></a>
Você pode alterar a frase: Leia também que está no inicio do código por qualquer outra frase que desejar. Depois salve e gadget e entre na pagina editar HTML (recomendamos Fazer Backup), clique em editar HTML e marque a opção expandir modelo de widgets. Agora procure por um dos códigos abaixo:

<div class='post-footer-line post-footer-line-1'>
<p class='post-footer-line post-footer-line-1'>
<data:post.body/>

Pode ser em qualquer um deles. Nós colocamos varias opções porque o HTML varia conforme o template, então encontre um deles e coloque esse código logo abaixo:
<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='bpslidein_place_holder'></div>
</b:if>
Portanto se inserir o código e não der certo tem que apagar antes de colocar no outro trecho. Depois é só clicar para salvar e já está pronto.

Veja mais alguns tutoriais para ajudar a manter as pessoas mais tempo no seu blog:
Personalizar Paginas do Blog: Mostrar Títulos dos Posts e Miniatura das Imagens
Mostrar assuntos relacionados no blog
12 Tutoriais para Ajudar a Melhorar e Personalizar seu Blog

Esse código de slides com posts relacionados (ou recomendados) pode ser bem útil como técnica de SEO para diminuir a taxa de rejeição do seu blog fazendo as pessoas visitar mais paginas e permanecer mais tempo no seu blog.

34 comentários :

  1. Olá, pode mim ajudar?
    Gostaria de saber como faço para tirar o titulo do gadget Postagens Populares?
    Obrigado.

    ResponderExcluir
  2. se não conseguir apagar o titulo do gadget clicando para editar o gadget por fazer pela pagina editar html, por exemplo nossos marcadores o código é assim:

    b:widget id='Label1' locked='false' title='Ajuda e Tutoriais para Blogueiros' type='Label'

    eu poderia pagar o titulo (Ajuda e Tutoriais para Blogueiros) e deixar assim:
    b:widget id='Label1' locked='false' title='' type='Label'


    use o ctrl f e procure pelo titulo do gadget na pagina editar html

    ResponderExcluir
  3. Já tentei. Mas quando vou salvar sempre dá erro.

    ResponderExcluir
  4. Como você fez para mudar a mensagem do Gadget do LinkWithin.

    Original: Poderá também gostar de
    A Sua: Mais Dicas e Ajuda para Blogueiros

    ResponderExcluir
  5. O código se coloca em cima ou a baixo dessas linhas??

    ResponderExcluir
  6. vc poderia disponibilizar um demo deste widget?
    ficaria grato

    ResponderExcluir
  7. Adustina Cidade deve ter faltado algum detalhe por exemplo < ' / > " nos códigos, veja também se não apagou algo por engano

    ResponderExcluir
  8. Enricks Pre
    os códigos são abaixo das linhas que falamos para procurar

    ResponderExcluir
  9. Preciso agradecer demais pelos seus tutoriais, são essenciais!!!

    Muito obrigada Fabiano!!

    ResponderExcluir
  10. Olá Fabiano nesse gadget tem como mostrar a imagem do post como tem no exemplo? eu testei no meu blog e só apareceu o titulo do post

    ResponderExcluir
  11. Henrique Araújo eu apenas testei o código e depois retirei.

    mas a imagem que aparece tem imagem?

    ResponderExcluir
  12. Olá Fabiano,
    Tentei tudo que podia, mas não deu para apagar o titulo do Gadget PopularPost.

    tem mais alguma sugestão?
    Fico Grata...

    ResponderExcluir
  13. tente colocar isso aqui como titulo: &nbsp;

    é um espaço vazio, talvez funcione

    ResponderExcluir
  14. Valew pela dica, ficou muito legal =)
    http://www.aindatorindo.com/

    ResponderExcluir
  15. Fabiano tenho duas perguntas, tem como editar a cor do link que aparece?

    A postagem relacionada só aparece quando o visitante rola a página toda para baixo, tem como colocar para aparecer se rolar um pouco a página já aparecer?

    ResponderExcluir
  16. Rosiel T.S. eu não testei, mas tente colocar antes do post.body para ver se ao começar a rolar a pagina funciona.

    ResponderExcluir
  17. Fabiano não deu certo, mas vou deixar assim mesmo.

    E sobre a aparência do link, tem como trocar a cor?

    ResponderExcluir
  18. tente colocar o código

    #bpslidein_place_holder a{color:#000}

    no html do seu blog para ver se funciona.

    ResponderExcluir
  19. Essa dica já funciona na visualização ou apenas quando salva o template?

    ResponderExcluir
  20. Andrias para dizer a verdade não testei só com a visualização.

    mas faça um backup do seu template antes de fazer as alterações assim não terá problemas em voltar ao modelo atual se não gostar do resultado ou der algum erro

    ResponderExcluir
  21. Olá Fabiano,

    Eu coloquei no meu blog e funcionou perfeitamente, mas eu queria que ele aparecesse somente na página inicial, como eu faço?

    Desde já obrigado.

    ResponderExcluir
  22. Esse site é o melhor, parabéns, todos os dias acesse e tenho utilizado muitas dicas em meu blog http://www.marciosouza.com/

    ResponderExcluir
  23. rama veja o segundo trecho do código:

    b:if cond='data:blog.pageType == "item"'

    troque a palavra item por index

    isso faz aparecer somente na pagina inicial

    ResponderExcluir
  24. Olá Fabiano,

    Tentei inserir no meu blog mas infelizmente não foi possível. Fiz tudo certinho, tentei várias vezes, mas não deu certo. Poderia me ajudar?

    Se quiser dar uma olhadinha, meu blog é http://www.bovoqui.com

    Abraços,


    Pietro

    ResponderExcluir
  25. basicamente é só colocar os códigos, mas talvez tenha alguma alteração no seu template que gerou o erro

    ResponderExcluir
  26. @Fabiano Roberto
    Ah...
    Obrigado pela resposta.

    Então quer dizer que não dá para eu colocar essa funcionalidade no meu blog?

    Você tem ideia do que poderia estar ocasionando esse erro?

    Obrigado,


    Pietro

    ResponderExcluir
  27. não editamos blogs de outras pessoas muita gente fala sobre isso mas não seria possivel atender a todos

    nos testes que fiz funcionou, mas precisa testar colocando o código depois de uma dessas linhas

    div class='post-footer-line post-footer-line-1'

    p class='post-footer-line post-footer-line-1'

    data:post.body/

    veja se não deixou nenhum código sobrando quando fez os testes

    ResponderExcluir
  28. @Fabiano Roberto
    Ok,

    Muito obrigado pela atenção!

    ResponderExcluir
  29. Funcionou no meu blog mas tenho uma pergunta.. Em todas as paginas são sempre os mesmos posts que aparecem.. Tem como mudar os post que aparecem?

    ResponderExcluir
  30. Gustavo não temos como controlar quais posts aparecem.

    concordo com você que deveria mudar, mas é o facebook que escolhe o que aparece com base nos cliques do botão curtir.

    ResponderExcluir
  31. Legal esse gadget! Minha dúvida é a seguinte: Tem como alterar o momento em que ele aparece? Pergunto isso, pois ele aparece apenas quando chega no rodapé do blog, no final mesmo, aí se for possível alterar o código para aparecer ao passarmos pelo final do post fica bem melhor e não no final do blog? Desde já agradeço! Deus vos abençoe! ;)

    ResponderExcluir
  32. acho que não tem como fazer essa configuração para exibir somente ao chegar ao final do post

    ResponderExcluir
  33. Está bem então, Fabiano. Obrigado mesmo assim! É que tenho uma breve impressão que o LinkWithIn não está recomendando de forma aleatória como antes. Às vezes são sempre as mesmas recomendações e não sei o que pode ser. Já fui na página de suporte e enviei um e-mail. Estou aguardando a resposta deles...

    ResponderExcluir