Classificação de estrelas das postagens – Ranking

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Saber o que seus leitores pensam de cada postagem é importante para direcionar bem o conteúdo do blog e para determinar o que é mais eficiente para atrair o retorno de seus visitantes. Existe uma nova ferramenta disponível para quem acessa o Blogger pelo endereço http://draft.blogger.com e que pode ser usando em alguns tipos de templates.

 

Abra o Blogger in Draft e vá em “Layout” e “Elementos da página”. No elemento “Postagens do blog”, clique em “Editar” (Edit). A janela que abre tem as opções gerais para todas as postagens e recursos desse elemento comum. Lá vc encontra a opção “Mostrar classificação de estrelas”; marque e clique em “SALVAR”.

janela02

Se o seu template está habilitado para usar esse elemento, funcionará automaticamente. Mas alguns modelos não funcionam e não aparece o Ranking de Estrelas. Encontrei a solução no excelente Blog da Juliana Sardinha – Dicas Blogger – segue abaixo cópia do tutorial desse blog com os devidos códigos a serem modificados.

janela03 Vá em “Layout” e “Editar HTML” e clique na marca “Expandir modelos de widgets” (isso é fundamental para encontrar algumas linhas de edição do HTML do seu modelo de blog). Vale lembrar que, sempre que modificar alguma coisa no código, faça o backup para refazer algum erro ou simplesmente garantir q vc tenha o original salvo. Veja aqui, como fazer backup do modelo.

No código do modelo, encontre a seguinte linha:

<b:include name=’feedLinks’/>

E inclua o código abaixo depois dela:

<b:if cond=’data:top.showStars’>
<script src=’http://www.google.com/jsapi’ type=’text/javascript’/>
<script type=’text/javascript’>
google.load("annotations", "1");
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();

google.setOnLoadCallback(initialize);
</script>
</b:if>

Feito isso, é preciso escolher onde vai aparecer o elemento na postagem. Para isso, no código, as linhas de elementos depois do texto que vc publica são três, logo no rodapé e são as seguinte – encontre elas:

<p class=’post-footer-line post-footer-line-1′>
<p class=’post-footer-line post-footer-line-2′>
<p class=’post-footer-line post-footer-line-3′>

Eu recomendo usar a primeira linha, onde fica mais visível e as pessoas vão ver logo e clicar para classificar seu artigo assim q acabar de ler. Escolha a linha q achar melhor e, abaixo do código de linha escolhido, copie o seguinte:

<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=’180′>
</div>
</b:if>
</span>

Faça bom proveito e lembre-se de incentivar seus leitores de clicar e classificar seus artigos.

.

14 Comentários

  1. Estou a ter alguns problemas com o código. Aparece a mensagem “Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The element type “p” must be terminated by the matching end-tag “

    “.

    Responder

  2. Vou pedir que leia com mais atenção o processo.
    Provavelmente vc está tentando adicionar mais códigos do q deve.

    Responder

  3. Marcos já tentei várias vezes mas continua a não me deixar inserir… já tentei adicionar diferentes coisas mas não me deixa nada… como ainda estou a tentar perceber como é que isto funciona sinto-me bastante perdida… tem alguma ideia do que possa fazer?

    Responder

  4. .

    Vc pode ser mais específica quanto ao erro?
    Se estiver tentando modificar alguma das linhas indicadas em vermelho (no tutorial acima), não vai funcionar mesmo…
    Não modifique as linhas indicadas em vermelho, mesmo que elas não estejam exatamente como no seu código-fonte.
    Deixe-as como é o original no seu modelo.

    Pode ser esse o erro. Você deve estar, ou adicionando elas tb ou está modificando as que encontra no seu código-fonte.

    Responder

  5. A linha exemplo 1,2,3 tem de levar no fim o fecho do p /p e as seta < >
    o blog nao deixa escrever aqui o codigo html

    Cump

    TVHDTUGA.BLOGSPOT.COM

    Responder

  6. Isso já está no código-fonte dos templates… não precisa fechar nem modificar nada daquelas linhas pois elas já estão como devem estar em cada template….

    se modificar algo nelas ou acrescentar algo, vai dar erro…

    Responder

  7. Tbm nao consegui colocar meu blog tem os códigos diferentes dos mostrados, x] nem dah erro, eu coloco o código mas quando vou ver na pagina nao aparece estrelas nenhumas Oo

    Responder

  8. É preciso lembrar que sem fazer a primeira parte do tutorial, onde mostra como ativar a função no painel do Blogger, realmente não vai funcionar.

    Outra coisa é: se seu blog não tem os códigos indicados é pq o template não está preparado para esse gadget.

    Responder

  9. Obrigado por compartilhar está dica, consegui enserir com sucesso no meu blog inclusive, mas no final da página aparecem 2 star rating um ao lado do outro, tentei me virar aqui para deixar apenas 1 mas não consegui =(

    Responder

  10. @Agenda Assembleia,

    Tudo é feito apenas no código-fonte do layout. Em momento algum do tutorial é mencionada nenhuma modificação na forma de postar um artigo.

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.