terça-feira, 9 de abril de 2013

Estrelas de avaliação no blog para o autor




A maioria dos sistemas de pontuação que conhecemos são para que os usuários avaliem uma postagem, mas neste caso não queremos a classificação do usuário, mas do próprio autor. Por exemplo, alguns blogs fazem recomendações de filmes, livros, jogos, etc, e querem colocar a taxa de "qualidade" do que estão falando, é quando podemos usar um sistema de classificação como este, para o autor colocar uma qualificação na postagem do filme, livro, ou o que queira qualificar.

O resultado será assim:




Neste sistema de classificação, vamos depender apenas de sprites CSS, que tem a capacidade de exibir notas parciais, ou seja, podemos dar uma a cinco estrelas, ou uma estrela e meia, duas e meia, e assim por diante.

A primeira coisa que vamos fazer é ir em Template | Editar HTML e colar antes de]]> </ b: skin> colar:


/* Estrelas de avaliação
----------------------------------------------- */
.val-fieldset {
width:100px;
border:none;
font-weight:bold;
font-size:12px;
}
.valoracion {
width: 100px;
height: 21px;
display: block;
0 0 no-repeat;
}
.val-0 {background-position: -100px -0;}
.val-5 {background-position: -81px -21px;}
.val-10 {background-position: -81px 0;}
.val-15 {background-position: -61px -21px;}
.val-20 {background-position: -60px 0;}
.val-25 {background-position: -40px -21px;}
.val-30 {background-position: -40px 0;}
.val-35 {background-position: -21px -21px;}
.val-40 {background-position: -21px 0;}
.val-45 {background-position: 0 -21px;}
.val-50 {background-position: 0 0;}


E na sua postagem onde queira mostrar a qualificação cole o seguinte:


<fieldset class="val-fieldset"><legend>Classificação:</legend><span class="valoracion val- 40 "></span></fieldset>



O que está em vermelho é a qualificação que você dará, neste caso são 4 estrelas. Os valores são múltiplos de 5, onde 0 é nenhuma estrela, 5 meia estrela, 10 uma estrela, 15 uma estrela e meia, 20 duas estrelas, etc. até o 50, que são cinco estrelas.

0 comentários:

Artigos Relacionados

Related Posts Plugin for WordPress, Blogger...