Postagens | Dicas blog, Imagem, Pc Windows

Colocar classificação de estrelas pra avaliar e votar em post de blogs do blogger

Vou mostrar como colocar a classificação com estrelas para fazer avaliações de postagens em blogs e sites que usam o blogger nova interface para gerenciar seu blog.

11/11/2013 - Talvez no momento esse sistema de classificação não está funcionando, possivelmente o blogger irá mudar algo nele, o código abaixo talvez será modificado, portanto, aconselho que aguarde alguns dias para colocar essa classificação, quem quiser ser avisado via e-mail clique aqui e assine o feed, ou seguir o blog na página no Google+, assim que normalizar eu posto


classificar se gostei muito, um pouco ou odiei postagensEsse acessório no blog é muito bom para a gente ter uma noção da aprovação ou desaprovação de um artigo(post) pelo visitante, além disso ele deixa o blog com uma cara mais profissional ou moderna, sem contar que muitos leitores gostam de dar sua avaliação e é uma maneira deles se sentirem participantes por poderem votar e dar uma nota ao post, e, se tem um post bem classificado com boa nota isso já sugere que ele seja bom, muitas pessoas levam em conta essas classificações como importante para seguirem lendo.

Importante, esse procedimento é cheio de detalhes, por isso leia devagar e com atenção aos detalhes, para alguns isso será fácil, para quem tem pouca prática pode ser bem difícil

Inserir classificação de estrelas só disponível no Draft.blogger.com

Muita atenção porque esse acessório de classificação que o blogger criou a bastante tempo, e eu uso ele sem demais problemas, ainda pode estar disponível apenas para ser inserido usando o blogger na extensão draft, para quem não sabe, o draft é onde o blogger lança as novidades que podem estar em teste.
Tem dúvida se o Draft.blogger.com é confiável?
O endereço do blogger em draft é draft.blogger.com e você usa sua conta normal, ele é um site seguro(do blogger.com), você pode perceber que antes de .blogger.com tem o nome draft e isso significa que isso é um site do blogger.com, é o que a gente chama de sub-domínio, que nesse caso pertence ao blogger.com e isso acontece com muitos sites na web, observe os endereços de sites para tentar entender essas 'peculiaridades', até para ficar safo e navegar com mais segurança.

Como colocar a classificação de estrelas em blogs do blogger

Alguns blogs talvez seja preciso fazer dois procedimentos, ativar a classificação de estrelas e inserir um trecho de código no seu HTML, isso porque talvez seu modelo não tenha o código necessário para esse acessório, mas, primeiro você precisa ativar a classificação de estrelas e abrir(ou recarregar) uma página de postagem seu blog para ver, se as estrelas estiverem nele tudo bem, se não apareceu as estrelas, aí significa que você terá que colocar o trecho de código no HTML do modelo do blogger.

    Ativar classificação de estrelas para blog do blogger

  1. Acesse o draft.blogger.com
  2. Se estiver na página inicial do blogger, clique na seta de menu que fica ao lado do nome de seu blog
  3. Abrirá o menu, talvez apareça uma barra de rolagem, caso aconteça, rode ela para encontrar a opção Layout
  4. Clique em Layout

    Se você estiver em outra área do blogger(correspondente a seu blog), aí a opção Layout pode estar no menu lateral da esquerda do blogger(veja imagem abaixo)

  5. Na página que abrir, encontre o 'quadro' que diz Postagens no blog e no mesmo quadro clique no link Editar
  6. saber como colocar avaliação de estrelinhas para dar voto em postagem do blogspot
  7. Na página que abrir marque a opção que diz Mostrar classificação de estrelas Classificar com estrelas e votar pra avaliar post no blogspot
  8. Clique no botão Salvar que fica na parte baixa da página
  9. passos para adicionar ratings stars e votar em really liked, loved it, didnt, na interface atualizada
A ativação das estrelas para avaliar seus posts está pronta, porém, você deve acessar seu blog e ver se elas apareceram, mas recarregue seu blog, se após isso não funcionar, aí é porque falta um trecho de código, sendo assim precisará adicionar o código para que as estrelas funcionem, pode seguir a instrução abaixo.

    Inserir código que falta para aparecer estrelas de classificação do blogger

    Antes de adicionar códigos ou mexer no HTML do modelo de seu blog do blogger, sempre é bom fazer uma cópia de seu modelo, clique aqui para saber, depois você pode prosseguir com muita atenção, antes pode até fazer em um blog de testes(clique e saiba mais), para evitar erros e praticar.
  • Acesse o blogger.com
  • Se estiver na página inicial do blogger, clique na seta de menu que fica ao lado do nome de seu blog
  • Abrirá o menu, talvez apareça uma barra de rolagem, caso aconteça, rode ela para encontrar a opção Modelo
  • Clique no botão Editar HTML
  • Aparecerá uma mensagem, precisará clicar em Prosseguir
  • Apenas localize essas linha de código:<div class='post-header-line-1'>Atenção, muito cuidado que tem uma outra linha bem parecida com ela, a outra tem esse caractere / no final, por isso é exatamente como eu mostrei.
    Para localizar, você precisa clicar no código da área de edição do blogger e pressione junto as duas teclas de atalho Ctrl F e use a linha de código acima colando ela no campo de localização e de Enter para localizá-la
  • Exatamente depois da linha que mostrei acima, Adicione esse código:<span class='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='240'/>
    </b:if>
    </span>
  • Clique em Salvar modelo
Muito cuidado ao acrescentar o código, ele deve ficar exatamente depois da linha de código que indiquei.

25 comentários:

  1. Cara valeu, deu certo, parabéns pelo tutorial

    ResponderExcluir
  2. cara no meu template ñ tem < class='post-header-line-1'> i agr eu escrevi assim pq ñ pode comenta div

    ResponderExcluir
    Respostas
    1. Se você usa um modelo que pegou na web, aí talvez não tenha, tenta achar esse:
      <div class='post-header-line-2'>

      Se você usa um template da web que não tem esses trechos, aí é bom mudar para um modelo do blogger, ou você vai passar por esse tipo de problema cada vez que aparecer uma novidade do blogger.

      Excluir
  3. Testei no blog de uma amiga deu certo, mas no meu não. Porquê?

    ResponderExcluir
    Respostas
    1. Precisa ver se a cor de fundo não é a mesma das estrelas, talvez se o blog não é aberto ao público, raramente em alguns blogs não aparece, e, outros blogs precisa adicionar o código, também não pode esquecer de Salvar.

      Excluir
  4. Cara valeu mesmo pelo post, ajudou e muito.

    ResponderExcluir
  5. Este comentário foi removido pelo autor.

    ResponderExcluir
    Respostas
    1. peço desculpa,foi engano meu,afinal parece que nao tinha colocado a opção "expandir modelos do widget" mt obrigado pelo turorial, continuem com um bom trabalho ;D

      Excluir
  6. oi, se vocês não encontrarem post-header-line 1 vocês podem colocar no RODAPE dos posts, como no meu blog, e so procurar < div class='post-footer'> e colar o código embaixo dessa linha, vejam que no meu blog tur-quea.blogspot.com as estrelas aparecem em baixo.

    Parabéns pelo tutorial, me ajudou muito. Obrigada!!!

    ResponderExcluir
  7. Muito bom cara! eu tava precisando disso no meu Blog! Vlw!

    ResponderExcluir
  8. Muito bom gostei, parabéns.... gostei bastante!

    ResponderExcluir
  9. Não encontrei a linha de código e segui no entanto os prodecimentos descritos....

    ResponderExcluir
    Respostas
    1. A maneira como os códigos ficam na área de edição do blogger mudou e eles ficam ocultos e não tem como expandir todos, agora tem uma nova maneira que é usando a opção de localizar da área de edição do blogger, só que essa opção fica oculta, portanto, para localizar, você precisa clicar no código da área de edição do blogger e pressionar junto as duas teclas de atalho Ctrl F e use a linha de código que mostrei acima colando ela no campo de localização e de Enter para localizá-la

      Excluir
  10. Ola amigo ótimo tutoril mais nao teria como eu botar as estreinhas abaixo do post?
    veja
    http://frasebookecia.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Sugiro que a classificação de estrelas fique no topo, uma vez que isso é um padrão da maioria de sites e blogs, tanto é que assim ocorre com os modelos do blogger, e, abaixo do post você pode colocar a opção de Reações para votar em ruim, bom, e outras que achar configurar(clique aqui), essa é outra opção do blogger que você poderá escolher as palavras para a qualificação.

      Mas, se você quer colocar as estrelas no final do texto do post, aí, será bem complicado, primeiro eu desaconselho a fazer isso, ainda mais se tem pouca prática, mas se quiser arriscar, é aconselhável que você faça uma cópia de segurança do código de seu modelo do blogger e além disso passe o código de seu modelo para um blog de testes do blogger e tente fazer isso primeiro nesse outro blog para saber exatamente onde ele pode ser colocado e praticar, aí então, com cuidado redobrado pode tentar fazer no seu blog original.

      Observe bem no post acima, eu mostrei o código responsável pela classificação de estrela no blogger, é o mesmo código que em alguns modelos pode estar faltando, para entender vou mostrar como ele começa:

      <span class='star-ratings'>
      <b:if.....

      Não use esse do meu comentário por estar incompleto.

      Para fazer essa alteração, primeiro você terá que copiar o código das "estrelas" e excluir ele de seu modelo, mas, cuidado, se excluir qualquer um caractere a mais vai dar problema e se deixar um caractere que deveria ter excluído também vai dar erro, continuando, para achar ele localize star-ratings, aí copie e remova o código que mostrei no post e é responsável pelas "estrelas", aí então localize:

      <div class='post-footer-line post-footer-line-1'>

      encontrando esse trecho pode colar o código exatamente abaixo dele e salve o modelo, aí então visite seu blog para ver como ficou, além de poder adicionar no local que indiquei, você pode tentar adicionar logo depois de:

      <div class='post-footer-line post-footer-line-2'>

      ou então depois de:
      <div class='post-footer-line post-footer-line-3'>

      Essas linhas indicam a base do post, nem todos os modelos tem todas elas.
      Atenção, muito cuidado que pode ter uma outra linha bem parecida com elas, a outra tem esse caractere / no final, por isso cuidado para não confundir.
      Você só deve ter um código para as "estrelas" no seu modelo, por isso cuidado para não adicionar mais um e esquecer de remover outro que já estava lá.

      Excluir
    2. Muito bem explicado porém no meu caso,que as estrelas não apareceram e nem as classificação(bom, ruim etc) eu tenho medo de mexer em códigos;
      Não tem outra maneira?

      grata

      Excluir
    3. Se fez o passo a passo e as estrelas de classificação não apareceram aí é porque seu modelo provavelmente não tem o código necessários para que elas apareçam, isso geralmente ocorre em modelos antigos do blogger, modelos de template que foram pegos de outros locais e pode ocorrer para os modelos dinâmicos, esse ultimo não é o seu caso, acho que você usa um modelo antigo ou template da web, aí só adicionando o código, mas com todos os cuidados que destaquei no post.

      Lembrando que os passos para ativar as estrelas possivelmente deve ser feito usando o Draft.blogger.com

      Excluir
  11. Deu certinho e consegui super rápido, sem complicações.
    Obrigada e parabéns !!

    ResponderExcluir
  12. Gostei muito do post do blog interessante continuem assim me ajudou muito parabéns

    ResponderExcluir
  13. Eu não consegui. Não aparece o "adicionar estrelas", e quando tento editar o HTML, procuro colando a linha no control F, mas não aparece. Tem alguma outra forma?

    ResponderExcluir
    Respostas
    1. Como eu disse no começo do post, no momento não está funcionando, vamos ver se o blogger vai colocar essa opção ou mudar algo dela...

      Excluir
  14. Boa noite, procurei o codigo informado mas só tem com a / no final, não achei sem a barra, sabe me ajudar ?

    ResponderExcluir
    Respostas
    1. Não faz mais diferença, o blogger desativou o serviço, e parece que não voltará, isso pelo tempo que já foi desativado.

      Excluir
    2. Caramba que mancada, era o melhor, o "Reações" é muito ruim.

      Excluir

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!

Postagens Populares