Review

Colocando Review Star nos Posts.

Para colocar um sistema de review em seus posts no Blogger é bem simples e rápido. O primeiro passo é você acessar modelo e editar html. e e procurar por:


]]></b:skin>

 acima dela colocar o código que está abaixo.

/*Review bomb */.file-info-wrap{overflow:auto}.file-info{display:inline;float:left;margin:0 auto;padding:10px}.bomb-0{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjRn_IgNpD41iuAyFQXj5EdunZevw1x_iIfYWRzP-woHC5shWlWFl5JvKLkSxs_2hoDcnDrkUJ1AYW1aV3-orPWMKaa5G_vzTRJUhedBNpMXHS7ShlMuJF99WSCR_J3bIXN9JkOry-NHo/s1600/bomba.jpeg) 0 0;height:49px;width:49px}.bomb-05{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQgyWuSEqyDZKxRriwtcnn87MyzY6cybWg2tnEs-dPygDKmFsPbPJKI3FxdPDt7eflhqawZAzlFjHeVCLFvPPN4-JFErxsP2U_oKg3EaiJBMZFKnoRMNgYLkGrXP6I0MTmmikduO1aiok/s1600/midstar1.png) 0 0;height:49px;width:49px}.bomb-1{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghPrpsmDWM13-puQOi8zEycX0SZg2j5msbWYbmjjJQCb2sikQGMzYFuoG_dtkRwX4SrVtcjRzSWmF44-IEAxyAKFhP_37uXB7Nd698g7pHjUXFdIjC77WhFBWtUAmbhF7VxCsocL-Et3Q/s1600/star1.jpg) 0 0;height:49px;width:49px}.bomb-15{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw6w3698sth-_3qdLlzkxjCKHoDRDtjSv4pfliJAYJ1C0eaACzgAPg2AiNbwgzECshxpUWIUJNFleYXvc5AUQid6IIwqj_-lchzSLGLrmHBn2tEh-KAjJbbWz1tnfK5QPKZKFhXud2aIE/s1600/star15.jpg) 0 0;height:49px;width:49px}.bomb-2{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgas818-QUizDOxW41ntjjMizALr34Ag5SrS9N_2cALbBcEOvfLLLvTUGWUFyM_7ahmVJ2EQgAlxOilFOmuN-C6bRXz4PZTV00_vug6z4BDanVsTjNI2whwQVlybe10ZG3VdRnqRQr34aE/s1600/star2.jpg) 0 0;height:49px;width:49px}.bomb-25{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_jmXfpBiaM3lrbu5VLJ7lfK3IxIe8aC3zDFwTZe2SKtvH0nAkvpqYTyBx-lGdTMwD0OxqBhtHN69LLSGJoVcIjC9x8XdYYXQVE6YUeADZcpuwTjj9x75-lg7PE3G-8T9s6SvuwWArvrc/s1600/star25.jpg) 0 0;height:49px;width:49px}.bomb-3{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-GuYNBJ1_STOP5C0MADT_Lsu0JQsdQA4MG5oLwvI53EsRs69oXVjaerPQpssX3G5gKQXGgP2kOsBT54hwNcPnJJwzhEA5-gCpHr56t5IhsQpiFRzNaYMlvnC267d9NS8MO8WYMa-IJEU/s1600/star3.jpg) 0 0;height:49px;width:49px}.bomb-35{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsdwQMp1SOsYKMbTfnZ8Zftv4KuOgONqSfOI2qSfQoDsrvKdrNvvuBDXg5EogIIECoItSaxZKKyO1mrzZkI1PLSn76X9CpfNLCwkvLqU_RXwvGKDD2Wf6i84heYc65t2AmPWRBvrIXpCw/s1600/star35.jpg) 0 0;height:49px;width:49px}.bomb-4{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiKc1vQdn9ZzVBGvVTyQyQtkLCU3p682XLZy5JOeOoke_tW_uefbfQt54NrKZX-Fuf4xpgS-FI9me9R0xEzKuftvKoXLWj74t6SdSSCIAPKws87wY2f0QDaiUIp_BQ4tsKyGQfHtcs1V4/s1600/star4.jpg) 0 0;height:49px;width:49px}.bomb-45{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGGHANrUVEXnaexC8O5lqU5cdbDrHswhDB6KNxK9DTBP_PEK8KWfhfP941U_IC1MAUG72i9_o06BQYR41KjCy_hnYim0JfGOnPJcsbI82X0Bo8T0Y2nhKfW8AutzeGqjGLRoIvrTqTegk/s1600/star45.jpg) 0 0;height:49px;width:49px}.bomb-5{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsCAhTkEjoNilD8bk4k_JsSPJWcxtvD0WflWDqdeu2MjutiPMJSQioyxL5OYMRrylyLmTci8SDOSgcIyQWO1yJ82FgDHFJg64yI0e3ethyphenhyphen7nPC5nBoS-fTzBCwjbUIqeXt-V3qUab_ADc/s1600/star5.jpg) 0 0;height:49px;width:49px}./*Review bomb */

A primeira parte é essa. Para o efeito aparecer nos posts, você deve inserir o código abaixo com sua avaliação, que vai de 0 (o rating e fracionado, ou seja, 0, 0.5, 1, 1.5, etc) a 5 estrelas.

<!--Review/bomb--> <div class="file-info-wrap"> <div class="file-info"> <b>Nossa Avaliação : 0.5</b> <div class="bomb-05"> </div> </div> </div> <!--Review/bomb-->

Mudando o código.

Caso queria mudar o código você deve alterar onde está Review bomb, tanto no 1º como no 2º código, alem disso você também deve renomear as chamadas para as imagens que no exemplo funciona assim: .bomb-15 para review de 1.5. É só dar uma olhada que você vai ver como funciona.

Se quiser mudar a imagem basta trocar a url da imagem pelo arquivo que você tem. No exemplo a imagem tem (altura) height:26px; (largura) width:114px e foram usados 11 imagens independentes em vez de uma imagem com todas as estrelas.