Como colocar o botão Amei! no Blogger - * Blog Elaine Gaspareto *

Como colocar o botão Amei! no Blogger

em 23/08/2017

Como colocar o botão Amei! no Blogger

Talvez você já tenha visto por aí, em blogs Wordpress, um botãozinho bem bonitinho em formato de coração (geralmente) que marca a quantidade de "Amei" que o post teve?
Mais ou menos assim:

Não dá pra ter exatamente igual nos blogs do Blogger, mas eu vou te ensinar hoje uma forma de personalizar as Reações e deixar como em meu exemplo:


Demonstração do tutorial



Importante:
Clicar no botão não leva o link pra lugar algum, não publica em nenhuma rede social, é só para o blog mesmo, um charme. Bem fofo, mas só um charminho para o blog.
Ok?



Como personalizar as Reações do blog e transforma-las no botão Amei!


Vamos aprender?
Para começar você precisa ativar as Reações (ou Reactions) em seu blog.
Vá até a aba Layout (ou Esquema, ou Design, é a mesma coisa) e clique em Editar na área chamada Postagens no blog.
Vai abrir uma janela mais ou menos assim (claro que com as informações de seu blog):



Marque a opção Reações e edite, colocando a palavra ou frase que deseja.
No meu exemplo vou usar apenas a palavra "Amei!". No exemplo da vídeo-aula coloquei uma frase. Faça como desejar, capriche!
Depois de feito isso, salve.
Salve a alteração do Layout e terminamos essa parte.
Agora vamos personalizar.
Acesse a página com os códigos necessários à realização do tutorial:


Copiar o código


A seguir vá até o painel de seu blog e clique em Modelo.
Acesse Editar HTML e dentro da caixa do código-fonte tecle Ctrl+F.
Dentro da barra de busca que aparecer digite <head> e tecle Enter para localizar.
Abaixo de <head> cole o código da fonte especial que gera o ícone do coração.
Salve.

Agora, dentro da barra de pesquisa, digite <span class='reaction-buttons'> e tecle Enter.
Caso consiga localizar o código apague de <span class='reaction-buttons'> até </span> e no lugar cole o código que eu disponibilizei.
Salve.

Não achou o código em seu template?
Não tem problema.
Copie o CÓDIGO JAVASCRIPT que disponibilizei na página com os códigos e cole abaixo de <div class='post-footer-line post-footer-line-1'>, conforme explico na página de códigos.
Feito isso, salve.

A seguir, na barra de busca, digite ]]></b:skin> e tecle Enter para localizar.
ACIMA de ]]></b:skin> cole o CÓDIGO CSS.
Esse código define o posicionamento do botão e a cor do coração.

Dica extra de personalização:
Para mover o botão para a direita ou para a esquerda altere os valores expressos em .reactions-label{
margin-left: 23em;
}

Quanto maior for o número mais distante da margem esquerda o botão ficará.
Ajuste até que fique como você deseja.

Os valores expressos em .reactions-iframe  se referem à distância do ícone do coração em relação ao widget propriamente dito.
Se precisar alterar mexa nos valores expressos aí, mas a distância  que deixei me parece boa :)

Se tudo deu certo o botão já aparece em seu blog.
Para facilitar a compreensão do tutorial, que é simples, fiz um mini vídeo mostrando o passo-a-passo.
Aperta o play!



Aproveite e se inscreva no canal de tutoriais do blog.
Não é bem um canal do Youtube, é essencialmente um apoio aos tutoriais do blog, mas sua inscrição ajuda muito na divulgação do meu trabalho.
Se inscreve aí, mig@s!
12 comentários via Blogger
comentários via Facebook

12 comentários:

  1. No meu blog não apareceu. Colei o codigo abaixo de <div class='post-footer-line post-footer-line-1'. Tenho a asinatura do autor no final do post será que tem algo a ver? Beijos

    ResponderExcluir
    Respostas
    1. Silvania, você lembrou de ativar o recurso no modo Layout?
      Se sim, eu sugiro que releia e que veja se não esqueceu nada. E ainda tenha em mente que para aparecer é preciso colar o código na segunda ocorrência da linha que explico no post.
      Não, não tem problema ter a assinatura.
      bjsss

      Excluir
  2. Oi descobri que no meu template as reações do blogger não aparecem. Tentei em outro e funcionou o tutorial. é uma pena pois eu gostei muito do template que eu estou utilizando, Beijos

    ResponderExcluir
  3. Oi Elaine, tudo bem?
    Como sempre ajudando a gente um montão!!!!
    Infelizmente, tem muita coisa que não estou conseguindo fazer e esse post por exemplo é um deles. Sempre consegui fazer as modificações que vc ensina, mas ultimamente, não está dando certo.
    Dessa vez apareceu essa mensagem: As configurações do widget com o código BloggerButton1 não são válidas. O URL do logotipo especificado não é permitido.
    Error 500
    Será que vc pode me ajudar?
    Muitos bjs e obrigada pelo carinho!!!

    ResponderExcluir
    Respostas
    1. Kessia, eu não sei dizer. Nunca aconteceu comigo...
      Você não esqueceu nada, nenhum sinal, nenhuma aspa, nada?

      Excluir
  4. Deu certinho, mas uma da parte tive que fazer diferente, já que meu template é baixado da net ;-; Algumas coisas são diferentes. :V Thanks pelo ensinamento. <3 Só preciso tirar o border que veio nele, acho que é por causa de alguma configuração já do meu template.

    ResponderExcluir
    Respostas
    1. Bereu Chan, é verdade. Se for template baixado da net o caminho pode ser um pouco diferente, mas dá certo :)
      bjssss

      Excluir
  5. Oi Elaine, segui tudo direitinho, tudo deu certo menos o coração fofo que não aparece de jeito nenhum. Repeti o passo a passo 3 vezes pra ver se tinha me esquecido de alguma coisa e nada! Será que você pode me ajudar? Obrigada, beijos

    ResponderExcluir
    Respostas
    1. Julia, você colocou o primeiro código, da fonte especial que gera o ícone do coração?

      Excluir
    2. Elaine, coloquei sim mas vou fazer de novo! Obrigada por sua atenção! Beijos

      Excluir
    3. Prontinho Elaine! Refiz tudo e agora deu certo! Muito obrigada pelo tutorial! Super fofo! Amei! Um bom domingo para você! Beijos

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…



Visualizações

Contando...

Dias online
Postagens
comentários