quinta-feira, 3 de julho de 2008

Como colocar estrelas para classificarem seu posts do Blogger

Hoje comecei a experimentar no blog um recurso do Blogger em Rascunho que permite que os visitantes votem em cada post do blog, marcando entre uma e cinco estrelas. Bem simples e é uma maneira de saber a opinião daquele visitante que nâo tem tempo ou hábito de deixar comentário.

O Draft Blogger, como o próprio nome já diz, é um rascunho do que pode vir a ser o Blogger, então os recursos aparecem nele primeiro para os usuários testarem e para os desenvolvedores irem fazendo as correções necessárias antes de disponibilizarem a versão definitiva no Blogger.

No Draft já estão sendo experimentados vários outros recursos interessantes, o detalhe é que muitos deles exigem códigos específicos que não existem em templates que foram criados antes. Se você usa template antigo, veja como ativar esse recurso.

  1. Entre no Draft e logue como se fosse no Blogger tradicional que você já conhece.
  2. Escolha o blog que será configurado (se tiver algum blog de testes e/ou algum blog antigo que você não atualiza mais, é melhor começar por ele).
  3. Vá até Layout » Elementos da página.
  4. Clique no link Editar do elemento Postagens no blog.
  5. Marque a opção Mostrar classificação de estrelas e Salve.
    Se o seu template for um template padrão do Blogger e você não fez modificações muito drásticas no código, é bem provável que só isso já seja suficiente para seu blog mostrar a classificação logo abaixo dos marcadores.
  6. Se o seu template é personalizado e/ou se por algum motivo seu blog não exibir a classificação após os passos supracitados, vá agora para a página Configurações » Editar HTML.
  7. Clique em Expandir modelos de widgets.
  8. Clique em Baixar modelo completo e salve seu template. Se já estiver editando o seu blog verdadeiro nem pense em pular este passo.
  9. Procure o seguinte código, sendo que a parte em destaque tem que ser idêntica, o resto do código pode ter sido editado anteriormente, então pode ser apenas parecido.
    <div class='post-body entry-content'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
  10. Logo abaixo desse código, você vai colocar o código abaixo, sendo que as partes que não estão destacadas você pode editar se e somente se tiver absoluta certeza do que está fazendo:
    <div id='star-ratings'>
    <b:if cond='data:top.showStars'>
    <div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
    </b:if>
    </div>
    Do jeito que eu coloquei aqui as estrelas ficarão imediatamente abaixo do texto para o leitor classificar o post assim que terminar de ler. Se não gostar da idéia e conhecer bem o código do seu blog, pode colocar em qualquer outro lugar dentro da parte do seu código que se refere aos posts. Com um pouco de CSS dá para colocar até no meio do texto.
  11. Bem, por falar em CSS, chegou a hora de editar a ID do seu novo widget. A ID no CSS é opcional, mas será útil quando você precisar fazer outras personalizações nesse recurso: cores, fonte, bordas, alinhamento, etc. Para isso vá até a folha de estilos do código do seu blog e coloque o seguinte código em destaque. Se não sabe onde está a folha de estilos, coloque imediatamente antes de ]]></b:skin>. Ficará assim:
    #star-ratings {border:2px dotted #ccff00;text-align:center;color:black;}
    ]]></b:skin>

Funcionou? Então comente! Não funcionou? Então reclame!

Pix meutedio arroba mail ponto com

29 comentários:

  1. Fiz tudo conforme você escreve, mas nada aconteceu. O que pode estar errado...

    ResponderExcluir
  2. Rodrigo,

    Os erros mais comuns são: tentar fazer isso no Blogger ao invés do Draft Blogger e esquecer de Expandir modelos de widgets antes de colocar o código.

    Se você realmente fez tudo conforme está escrito, só olhando seu código para saber o que ocorreu.

    Se quiser, salve seu código e mande anexo para um dos e-mails da página contato.

    ResponderExcluir
  3. Obrigada...fiz tudo certinho e deu tudo certo no meu blog...valeu...Valeuuuuuuuuuuuuu

    ResponderExcluir
  4. Não sabia do Draft ainda, gostei muito da dica. Pena que não funcionou aqui ainda, mas depois vou rever com calma o que pode ter acontecido ;)

    ResponderExcluir
  5. Aqui ficou uma divisória entre os posts amarela.

    ResponderExcluir
  6. Essa edição na folha de estilos não é obrigatória, é só um exemplo, pode tirar:

    #star-ratings {border:2px dotted #ccff00;text-align:center;color:black;}

    Você usou o Draft Blogger?

    ResponderExcluir
  7. Sim, o rascunho... e com o Expandido o modelo como no tutorial;

    ResponderExcluir
  8. Bruno, então tira a linha de código supracitada da folha de estilos, assim não vai aparecer a linha pontilhada amarela.

    ResponderExcluir
  9. Oi Helen , td bem?
    um complemento para o seu post.

    Se vc quiser por essas estrelinhas, soh aparece, aparece eu digo sem a necessidade de modificar o html, se vc selecionar idioma inglês em configurações - formatação.

    Teste isso.
    Obrigado, Renato.

    ResponderExcluir
  10. Renato (Festa Paraíso),

    Obrigada pelo complemento. Não testei assim porque já tinha colocado antes, mas fica a dica para os próximos que lerem.

    ResponderExcluir
  11. cara! adorei o post sobre o @live.com do msn funcionou legal ainda bem que existem gentes como vc com conteudo na net bjsssss

    ResponderExcluir
  12. Erro:

    Mais de um item encontrado com o id: HTML1. Os IDs de itens devem ser únicos e exclusivos.

    ResponderExcluir
  13. Esse erro não tem relação com esse código, sinto muito.

    ResponderExcluir
  14. Eu tb ... fiz tudo certo como mandou o tutorial e nao deu certooo! =[

    ResponderExcluir
  15. Olá eu gostaria de saber como faz para mudar o nome que estão em ingles [like it] [lovet it] etc...

    ResponderExcluir
  16. tive q fazer o editar o html e deu certin, valeu d+ pela dica !!

    ResponderExcluir
  17. ae eu fiz tudo do tutorial e nao apareceu nada!...tem como vcs fazerem um video aula de Como colocar estrelas para classificarem seu posts do Blogger???mandem o video para o msn gtarsidentevil2009@hotmail.com ou miguel.matheus@hotmail.com

    me ajudem!!!!!

    ResponderExcluir
  18. @matheus miguel, não trabalho com tutoriais em vídeo, sinto muito.

    ResponderExcluir
  19. Adorei a dica!
    comigo funcionou normalmente!
    vlw!

    ResponderExcluir
  20. É possível que a classificação fique em português?

    ResponderExcluir
  21. Sybylla, não conheço nenhuma forma de deixar em português e ainda não pesquisei a respeito.

    ResponderExcluir
  22. Olá, quero agradecer a vocês que me ajudaram a solucionar este problema de votação por estrelas no meu blog.

    Fiz todos os paços acima, mais uma otima dica pro pessoal eh instalar um plugin do http://www.outbrain.com/
    ele reconhece seu blog e instala pra você, além disto você pode deixar em português, é execelente!

    Ah, da uma olhada no meu blog assista os vídeos e dê seu voto: http://blogclipix.blogspot.com/

    ResponderExcluir
  23. Comigo não funcionou. Segui tudo direitinho, sem mudar nada, mas de nada adiantou. A linha até que apareceu. Vai ver que o meu layout não aceita... deve ser isso que acontece com alguns e por isso não dá certo.

    ResponderExcluir
  24. Olá tentei o Tutorial como o bruno disse sobre a divisão com a linha amarela tirei o código da folha de estilos e mesmo assim as estrelas não aparecem pode me ajudar.

    ResponderExcluir
  25. Sasuke, não posso ajudar. A última vez em que usei esse recurso foi em 2008, quando escrevi o post.

    ResponderExcluir