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!