03/02/2012

Avaliação de Postagens do Blog com Imagem de Mãozinha (Positivo e Negativo)

Coloque um sistema de avaliação de postagens no seu blog com as imagens das mãozinhas com sinal de positivo e negativo isso é uma forma simples de saber a opinião das pessoas, além disso, pode ser um acessório legal que muitas pessoas gostam dessa forma simples e rápida de votar avaliar o post. Mas se quiser você pode usar também o gadget padrão do blogger para mostrar reações.
avaliação de blogs

Antes de começar faça um backup do seu template embora esse código seja muito simples de colocar é melhor ter uma cópia de segurança.

classificar postagens do blog

Entre na pagina editar html, marque a opção expandir modelos de widgets, use o Crtl+F e procure por:

<data:post.body/>

Em alguns templates que usam o resumo da postagem tem mais de um então precisa testar para descobrir qual é o correto. E coloque esse código logo abaixo dele.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title' view='score'>
</div>
</b:if>

Agora encontre </body> e coloque essa linha antes dele:

<script src="http://js-kit.com/ratings.js"></script>

Clique para salvar as alterações e já está tudo pronto, agora seu blog já tem um sistema de avaliação de postagens com as mãozinhas fazendo sinal de positivo e negativo.
avalizar post com estrelas

Se quiser que apareça a avaliação com estrelinhas é só apagar o trecho view='score' na primeira parte do código, mas se quiser classificação dos posts com estrelas você pode usar também como mostramos em outros artigos:
OutBrain - Classificação com estrelas nas postagens
Google Friend Connect - Colocar Avaliação com Estrelinhas no Blog ou Posts

O único ponto negativo desse sistema é que ele é feito em inglês e não temos a opção de tradução, mas as pessoas normalmente apenas votam e olham os números ao lado dos ícones de positivo e negativo para ver a contagem, por isso achamos que o idioma do widget não atrapalhará em nada. Esperamos que gostem de mais esse acessório para usar no seu blog e digam sua opinião sobre ele.
Related Posts with Thumbnails

65 comentários:

  1. Da para trocar a imagem das mãos por outra?

    ResponderExcluir
  2. Gostei! Mas ele só aparece na pagina da postagem, na pagina inicial não aparece! Não tem como por na pagina inicial também?

    ResponderExcluir
  3. Anônimo
    as imagens são geradas pelo site que criou o código e não podemos trocar

    O Grande Curioso - Maurício Jr.
    tente colocar na primeira parte do código somente assim:

    < div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title' view='score' >
    < /div >

    ele deve aparecer em todas as paginas do seu blog.

    ResponderExcluir
  4. Fabiano não seria melhor utilizar:

    < script src =' http:// js-kit.com/ ratings.js ' />

    (Eu usei espaços acima pois o blogger não deixa usar a tag script)
    Assim o navegador só carrega o JS quando a página for uma postagem.

    ResponderExcluir
  5. Não está aparecendo as mãozinhas no final da postagem, já olhei no código fonte, e o código está lá.

    ResponderExcluir
  6. Fabiano, decidi ler só pelo título "avaliação com mãozinhas", na boa, eu ri. Vou testar.

    ResponderExcluir
  7. Testei em dois blogs e não apareceu. =\

    ResponderExcluir
  8. Isaias
    sinceramente eu fiquei todo atrapalhado na hora de escolher um titulo então acabei escolhendo esse, mas reconheço que não foi grande coisa

    ResponderExcluir
  9. Sybylla
    veja se não tem outro post.body no seu html, as vezes tem mais de um e você está colocando no lugar errado.

    vou atualizar a postagem falando sobre isso.

    ResponderExcluir
  10. Fabio Rossini Sluzala
    se testar e funcionar ... tudo bem.

    mas o código é feito para a paginas da postagem.

    ResponderExcluir
  11. Fabiano

    Pelo contrário, foi um título simples e engraçado ao mesmo tempo. Abraço.

    ResponderExcluir
  12. Como sempre, mais um óptimo post. Os meus parábens novamente!!!

    ResponderExcluir
  13. FIZ CERTINHO,MASNAO APARECEU NADA NAO!:(

    ResponderExcluir
  14. Fabiano , já tentei usar o outbrain várias vezes e não rolou. Quando li essa postagem fiquei mega feliz achando que finalmente conseguiria realizar meu desejo antigo de ter as tais estrelinhas de outra forma no meu blog só que tentei muitas e muitas vezes mas também não deu certo . Existe algum outro jeito? Procurei os códigos mas não tive sucesso .

    ResponderExcluir
  15. Fabiano, ali onde eu falei do script, eu usei uma tag do blogger, mas o blogger apagou a tag

    ResponderExcluir
  16. Suelytânia
    veja se no seu template não tem varios post.body geralmente o erro é esse

    ResponderExcluir
  17. balaiodalana
    como falei no comentário anterior pode haver varios post.body e se colocar no erro não vai funcionar

    ResponderExcluir
  18. apesar do tutorial ser ótimo não pegou no meu não apareceu nd

    ResponderExcluir
  19. Vo pensar se eu vo colocar no meu blog.Entre ai http://blogueirodicas.blogspot.com/

    ResponderExcluir
  20. Fabiano você não conseguiu colocar o do Poll Daddy nas postagens? naquele comentário que eu fiz.

    Abraços!!!

    ResponderExcluir
  21. Ben
    veja se tem outro post.body no seu html e tente colocar o código neste outro. (não repita o código, troque de lugar)

    Rosiel T.S.
    na verdade quando tentei fazer meu cadastro no poll daddy deu erro então não consegui fazer o tutorial e depois comecei escrever outros assuntos, mas vou lá tentar novamente

    ResponderExcluir
  22. Amo seu blog, a muito tempo que seu banner está no meu blog de artesanatos.....adoro as sua dicas e conselhos para blogueiros.
    Obrigada por todas as dicas e ajuda que vcs prestam ao mundo virtual!
    Um beijo no coração da amiga Cátia.
    http://catiaartesmanuais.blogspot.com/

    ResponderExcluir
  23. Fabiano, isso não tem a ver com o post, mas eu queria que você me ajudasse por favor, eu queria saber como faz pra colocar uma imagem na lateral do blog, que se a pessoa girar a rodinha do mouse pra baixo, a imagem ir para baixo junto.
    Por favor, em nenhum blog tem ensinando isso.

    ResponderExcluir
  24. anonimo


    veja se é isso que procura: Navegar Dentro da Página - Criar links na mesma pagina

    então pode criar um link para o final da pagina

    ResponderExcluir
  25. Adoro seu blog, sempre esta me ajudando. Já estou seguindo, segue de volta?
    www.coisasdemenina-vicky.blogspot.com
    www.clubeselenagomezdiva.blogspot.com

    ResponderExcluir
  26. Excelente!
    Estou iniciando meu Blog Agora, no momento ele está em manutenção exatamente para colocar em prática algumas ideias que andei retirando do Dicas Para Blogs..
    E Adorei o trabalho de vocês, com certeza terão um banner no meu blog.

    Segui tudo direitinho o que você falou e deu tudo certo, no final, antes de ler os comentários, percebi que só aparecia as "Mãozinhas" na página da postagem.
    Depois eu parei para ler os posts e vi exatamente este "problema" ser resolvido.

    Muito Obrigado pela dedicação de vocês.
    Que tenham um ótimo trabalho.

    Equipe Risadinhas-Blog
    http://risadinhas-blog.blogspot.com

    ResponderExcluir
  27. Eu coloquei esse tutorial, mais não apareceu nada nem maãosinha pra cima nem pra baixo o meu templante é o clássico, bela não valeu nada_ a /

    ResponderExcluir
  28. coloquei, mais só aparece se clicar no titulo da postagem !

    ResponderExcluir
  29. BEM VINDO AO BLOG DE GISOALVES
    esse código é para mostrar a avaliação somente na pagina da postagem, mas se quiser que apareça em todas as paginas apague a primeira e ultima linha do código

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

    < /b:if >

    ResponderExcluir
  30. Oi ...
    Fiz direitinho do jeito que vc mandou + não funcionou :( Pq será?

    ResponderExcluir
  31. Karina Karoline
    pode ser algum detalhe no seu template.

    mas tente retirar e colocar o código novamente.

    se quiser pode colocar depois de

    < div class='post-footer-line post-footer-line-1' > ou algo parecido com isso: post-footer-line

    as vezes varia conforme o template

    ResponderExcluir
  32. Fabiano essas mãozinhas não funcionaram no meu blog o meu template tem dois desse mas eu ja testei nos dois e não funciona...

    Vlw

    ResponderExcluir
  33. o código é feito para templates do blogger, mas se tiver muitas alterações pode gerar problemas

    ResponderExcluir
  34. Fabiano, no meu caso funcionou somente quando coloquei depois da linha de código: < div class='post-footer-line post-footer-line-1' >, havia testado em todos os e não funcionou.
    att.

    Gilmar

    ResponderExcluir
  35. Gil Lima
    esses novos templates tem muitos detalhes... mas o importante é que achou um jeito de funcionar no seu blog.

    ResponderExcluir
  36. Fabiano,no meu hormail o body tem só um,mas é de outro widget que está no trecho.Poderia substituir alguma outra tag?

    ResponderExcluir
  37. Pedro
    no seu hotmail? não entendi o que está querendo dizer

    ResponderExcluir
  38. E nos comentários? Tem como?

    ResponderExcluir
  39. não conheço código para fazer a avaliação de comentários, mas vou procurar se conseguir um que funcione bem farei um tutorial sobre o assunto.

    ResponderExcluir
  40. eu queria de comenatrios Fabiano

    ResponderExcluir
  41. Olá Fabiano, eu coloquei esse código em 2 blogs meu! No 1°, era para testar, e no 2°, era pra valer! No 1° funcionou, mas no que era pra ser pra valer não foi, era pra ficar nesse blog que eu deixei aqui no NOME/URL. Você poderia me dizer PQ disso? Será que o template do meu blog tem algum código que não deixa colocar este?

    ResponderExcluir
  42. Saga de Animes
    templates muito personalizados podem ter tags ou scripts que geram conflitos de códigos se for esse o caso é bem dificil resolver.

    mas veja se colocou o ´codigo no lugar certo da segunda vez. talvez tenha mais de uma vez o mesmo trecho de código no seu blog.

    ResponderExcluir
  43. Hey Fabiano, quero te agradecer por ter me dito pra insistir^^. Tentei mais umas 3 vezes e consegui descobrir o problema!

    No meu Blog, tinha quatro dessas linhas aqui: "", eu coloquei na 1°, não deu, na 2°, tbm ñ, até chegar na 3°! e problema resolvido! Agora o código funciona perfeitamente.

    Será que esse tipo de conflito nos códigos tem atrapalhado outros códigos que eu venho tentado botar no Blog como este? Eu tentei colocar aquele seu tutorial da caixinha do código de cada página, assim quando fizer uma postagem nova, automaticamente criar um tipo de: "Embed" para ela, mas também não funcionou, será que é isto?

    ResponderExcluir
  44. pode ser também o lugar errado no html que não deixou a caixa funcionar.

    mas os templates com muitas alterações vão ficando cada vez mais difíceis de mexer

    tente procurar por post.body e colocar o código depois dele.

    ResponderExcluir
  45. Não foi dessa vez,vc n me ajudou... Mas se mecher em configurações é mais facil!!! www.vaidoosas.blogspot.com

    ResponderExcluir
  46. Consegui, mas achei muito pequeno os botões.

    ResponderExcluir
  47. nao temos como alterar o tamanho das imagens

    ResponderExcluir
  48. Tem Como Tenta Fazer as Quelas Joinha do Youtube Fabiano ?

    ResponderExcluir
  49. acho que não tem como fazer essa alteração

    ResponderExcluir
  50. seria possivel voce recuperar esse arquivo .js ?
    eu estou precisando muitissimo
    ele nao existe nesse serve'-'

    ResponderExcluir
  51. infelizmente não é possivel recuperar o arquivo .js

    ResponderExcluir
  52. Bom dia, amigo eu fiz tudo como você ensinou, mas não sei porque não esta aparecendo nos meus post.. tem como você da uma olhada? me ajude por favor..
    meu blog é: http://BrincardeJogar.blogspot.com.br .
    Muito Obrigado, e parabéns pelo site, é o melhor de dicas html que eu conheço!
    Abraço!

    ResponderExcluir
  53. esse código tem muitos detalhes... então veja se não apagou ou colocou algo por engano..

    além disso exitem códigos externo que podem apresentar falhas e neste caso não tem o que fazer.

    ResponderExcluir
  54. Blz desisti já. kkk mas brigadao Fabiano Roberto.. rsrsr

    ResponderExcluir
  55. Meu blog não tem a tag '-' oq eu faço?

    ResponderExcluir
  56. AMIGO TENTEI COLOCAR DE VARIA MANEIRAS E NAO DEU NAO MOSTROU NADA ONDE PEDIU PRA COLOCAR NEM MAOZINHA NEM PEZINHO NADA RSRSRS COMO FAÇO AJUDAI POR FAVOR VALEU

    ResponderExcluir
  57. Isabel esses códigos são externos do blogger... então podem gerar conflitos com outros scripts e não funcionar dependendo do template....

    mas verifique se não apagou algo por engano... colocou alguma coisa em lugar errado. Normalmente são pequenos detalhes que fazem os códigos dar erros

    ResponderExcluir
  58. No meu blog http://www.geografiaopinativa.blogspot.com.br/ tem vários , tem como saber qual é? São muitos

    ResponderExcluir
  59. se achou mais de um o jeito é fazer um backup do seu template e depois testar colocando e retirando o código de cada um deles

    ResponderExcluir
  60. O script foi apagado pessoal esta dando 404 onde ele esta hospedado por isso não funciona mais.

    ResponderExcluir
  61. Guthi vou procurar outro código e assim que possível fazer um novo tutorial sobre esse assunto

    ResponderExcluir