Pesquisa personalizada

terça-feira, 2 de julho de 2013

Como colocar widgets de "Postagens recentes" e de "Comentários recentes" no Blogger





Os widgets que eu usava para  "Postagens recentes" e  "Comentários recentes" não estavam mais funcionando nem aqui no Crazyseawolf's nem no Dorgas on Fire e tive que retirá-los. Agora com as férias escolares, arranjei tempo para descobrir o quê aconteceu.

Na  verdade o problema estava no Google Sites, onde eu hospedava os arquivos .js e a  solução foi usar o Google Drive para hospedá-los.

- Aprenda aqui como hospedar sites no Google Drive
- Aprenda aqui como hospedar CSS e scripts no Google Drive

Os scripts usados são velhos conhecidos pela web e foram criados por Hans Oosting entre os anos de 2006 e 2007 e que foram "repipocados" pela web, sendo que eu os peguei anos atrás no blog Beautiful Beta, e usam json (Eu odeio jQuery).

Quem quiser colocá-los, é só copiar e colar cada código abaixo em um gadget HTML/JavaScript (vá  em  painel de controle >> aba Layout >> clicar em Adicionar um gadget (onde quiser por os widgets) >> procurar por HTML/JavaScript. A vantagem deles é que você pode colocar a  quantidade que quiser, ao invés das limitações impostas no gadget Feed, que só permite apenas 5.

Widget de Postagens Recentes

<ul>
<script style="text/javascript" src="https://googledrive.com/host/0BwU7Ti8M_XCUZGhmZlRGdzRXMHM/recentposts.js">

</script>
<script style="text/javascript">
var numposts = 5;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://crazyseawolf.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts">
</script>
</ul>

Observações:
Em [var numposts = 5;], você coloca a quantidade de posts a serem mostrados.
Em [var showpostdate = true;], você determina se quer ter a data do post, caso não queira, troque "true" por "false".
Em [var showpostsummary = true;], você determina se quer mostrar um resumo do post, caso não queira, troque "true" por "false".
Em [var numchars = 100;], você coloca o número de caracteres no resumo
Em [var standardstyling = true;], Você determina se segue os padrões de estilo das letras e cores do seu blog, caso não queira, troque "true" por "false".

Widget de Comentários recentes

<ul>
<script style="text/javascript" src="https://googledrive.com/host/0BwU7Ti8M_XCUX1RyQ1RrU0Y4b1k/recentcomments.js">
</script>
<script style="text/javascript">
var numcomments = 5;
var showcommentdate = false;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://crazyseawolf.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script>
</ul>

Observações:
Em [var numcomments = 5;], você coloca a quantidade de comentários a serem mostrados.
Em [var showcommentdate = false;], você determina se quer ter a data do comentário, caso queira, troque "false" por "true".
Em [var showpostsummary = true;], você determina se quer mostrar um resumo do comentário, caso não queira, troque "true" por "false".
Em [var numchars = 100;], você coloca o número de caracteres nos comentários.
Em [var standardstyling = true;], Você determina se segue os padrões de estilo das letras e cores do seu blog, caso não queira, troque "true" por "false".
Um detalhe, NÃO esqueça de trocar a URL do meu blog pela URL do seu blog, conforme indiquei nos dois códigos acima na cor vermelha!

Caso você queira hospedar os scripts em um outro servidor, disponibilizo eles no formato doc. Basta copiá-los e colá-los no bloco de notas, e depois renomear a extensão ".txt" em ".js". Infelizmente o Blogger ainda não permite o download de arquivos!


Permalink:





Sobre o Autor:
Crazyseawolf Para saber mais sobre o autor deste blog, visite o seu perfil no Google+ ou este link . Para enviar uma mensagem, clique aqui . Para outras informações, leia o FAQ .



12 comentários :

  1. Obrigado por mais essa, amigo. Eu tinha colocado um widget (bonito) de comentários recentes com avatar com bordas arredondadas dos comentaristas, mas que usava o feed, e de uns dias pra cá reparei que a página do meu blog estava demorando muito (muito mesmo) pra abrir, em relação às outras páginas. Reparei que a página estava travando bem no momento de abrir o widget de comentários recentes. Aí então, fiz o teste: retirei o widget e.....voilá!... A página voltou a carregar normalmente. Você deve entender o que devia estar acontecendo. Agora coloquei este código que você passou e está tudo normal. Melhor ter um widget sem as carinhas dos comentaristas, mas que funciona e não trava a página, do que um bonitinho mas que pode até afugentar visitantes com a demora pra abrir a sidebar do blog.
    Parabéns. Mais uma prova de que você sabe tudo de Blogger mesmo. E chupa Wordpress! :)

    ResponderExcluir
    Respostas
    1. Jairo
      O widget deveria estar travando por causa do script e do local onde estava hospedado. E além do mais, as imagens são dão um toque bonito mas ao mesmo tempo influi no tempo de carregamento do blog se elas não forem tratadas corretamente.
      Você viu que eu coloquei as imagens dos comentários arredondadas?
      É só um simples truque de CSS3. Agora nas férias, vou tentar adaptar o widget de comentários para colocar as imagens assim, mas não prometo nada porque sou uma anta em termos de javascript. :)
      Um abraço!!!

      Excluir
  2. Olá Aparecido, também tive o mesmo problema que o Jairo, e fui obrigado a retirar o widget. Sua dica é muito bacana, testei seu widget aqui e funcionou legal, parabéns pelo trabalho! Porém antes de usar definitivamente vou aguardar um pouco mais até que você consiga adaptá-lo para a colocação dos avatares dos comentaristas. É claro que colocarei os créditos a sua pessoa (e/ou blog).
    Abraços e parabéns novamente.

    ResponderExcluir
  3. Olá Aparecido, sou eu novamente. Retornei para comunicar que percebi como fazer o antigo widget que eu utilizava voltar a funcionar. Bastou seguir a dica que você dá no inicio do seu artigo, ou seja, hospedar em outro lugar os arquivos .js
    Valeu cara, brigadão mesmo.

    ResponderExcluir
    Respostas
    1. Legal! Temos que tomar muito cuidado com o tipo de servidor em que colocamos scripts, css e fotos. Eu tendo a confiar mais no GDrive por ser da Google. Acredito que a empresa deveria tornar esse tipo de integração com o Blogger mais perfeita.

      Excluir
  4. Amé´´emmm um código que funciona e nao tem publicidade do blog que disponibiliza...Parabenssss =)

    ResponderExcluir
  5. muito bom esse widget , so nao perceboo porque de so me aparecer 2 comentarios apesar de varios ,ja podei aquele 5 mas nada . se alguem poder ajudar

    ResponderExcluir

Pessoal, comentem, críticas e elogios serão bem aceitos. E eu respondo, posso demorar mas respondo. Esse velho lobo do mar tarda mas não falha!!!!

Leia antes a minha Política de Comentários.

Se quiser deixar o link de uma postagem sua, utilize o código abaixo trocando o que está escrito em letra maiúscula:

<p><abbr><em><strong>SEU NOME</strong> - último post do blog... <a href="<strong>LINK-DA-POSTAGEM</strong>"><strong>TÍTULO DA POSTAGEM</strong></a></em></abbr><p>

Related Posts with Thumbnails
Google
 
 
Template Denim, criado por Darren Delaye, customizado por Crazyseawolf.