Como colocar botões de reações no Blogger

Esse código é bem simples e fácil de implementar, mas precisamos usar um script de terceiros.
Esses botões de reações são meramente decorativos. Não realizam contagem.

Você pode colocá-los numa FAQ  ou página de ajuda do seu blog.

Primeiro, começamos pelo código HTML. Esses botões ficarão no final do post, então abra o editor html do Blogger. Para isso, procure no painel, ao lado esquerdo a opção TEMA > Clique nos três pontinhos > Editar HTML.

Feito isso, clique em qualquer área do código do tema, aperte as teclas CTRL + F, que te permitirá pesquisar as seções. Dentro da pesquisa, digite:

<data:post.body/>

Nessa área aparecerá todo o conteúdo das postagens do seu blog.

Abaixo desse código, copie e cole o código abaixo:

<div class="intercom-reaction-picker" dir="ltr">
  <div class="intercom-reaction-prompt">Você gostou desse artigo?</div>
    <button class="intercom-reaction" data-reaction-text="disappointed" tabIndex="0" aria-label="Disappointed Reaction">
      <span data-emoji="disappointed" title="Desapontado">
      </span>
    </button>
    <button class="intercom-reaction" data-reaction-text="neutral_face" tabIndex="0" aria-label="Neutral face Reaction">
      <span data-emoji="neutral_face" title="Nem bom, nem ruim">
      </span>
    </button>
    <button class="intercom-reaction" data-reaction-text="smiley" tabIndex="0" aria-label="Smiley Reaction">
      <span data-emoji="smiley" title="Feliz">
      </span>
    </button>
</div>

Agora vamos estilizar a área dos botões com CSS.

Aperte as teclas CTRL + F novamente, e dentro da barra de pesquisa, digite:

]]></b:skin>

Acima desse código, copie e cole o código abaixo:

/*BOTÕES DE REAÇÕES*/
.intercom-reaction-picker {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    padding: 12px;
    text-align: center;
    color: #777;
    background-color: #f1f1f1;
    margin: 60px -44px -44px -44px;
    border-radius: 8px
}
@media (max-width: 1023px) {
    .intercom-reaction-picker {
        margin:30px -16px -16px -16px
    }
}
@media (max-width: 600px) {
    .intercom-reaction-picker {
        margin:30px -8px -12px -8px;
        border-radius: 8px
    }
}
.intercom-reaction-picker.intercom-reaction-picker-with-prompt {
    height: 74px
}
.intercom-reaction-picker .intercom-reaction-prompt {
    padding-top: 9px;
    padding-bottom: 4px;
    text-align: center
}
.intercom-reaction-picker .intercom-reaction {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    width: 50px;
    height: 100%;
    display: inline-block;
    text-align: center;
    font-size: 34px;
    -webkit-transition: -webkit-transform 0.16s cubic-bezier(0.65, 0.61, 0.18, 1.8) 0.02s,-webkit-filter 0.32s linear;
    transition: -webkit-transform 0.16s cubic-bezier(0.65, 0.61, 0.18, 1.8) 0.02s,-webkit-filter 0.32s linear;
    -o-transition: transform 0.16s cubic-bezier(0.65, 0.61, 0.18, 1.8) 0.02s,filter 0.32s linear;
    transition: transform 0.16s cubic-bezier(0.65, 0.61, 0.18, 1.8) 0.02s,filter 0.32s linear;
    transition: transform 0.16s cubic-bezier(0.65, 0.61, 0.18, 1.8) 0.02s,filter 0.32s linear,-webkit-transform 0.16s cubic-bezier(0.65, 0.61, 0.18, 1.8) 0.02s,-webkit-filter 0.32s linear;
    cursor: pointer;
    -webkit-transform-origin: 50% 60%;
    -ms-transform-origin: 50% 60%;
    transform-origin: 50% 60%
}
.intercom-reaction-picker .intercom-reaction span {
    cursor: pointer;
    line-height: 55px
}
.intercom-reaction-picker .intercom-reaction:hover {
    -webkit-transform: scale(1.32);
    -ms-transform: scale(1.32);
    transform: scale(1.32);
    -webkit-transition: -webkit-transform .04s;
    transition: -webkit-transform .04s;
    -o-transition: transform .04s;
    transition: transform .04s;
    transition: transform .04s, -webkit-transform .04s
}
.intercom-reaction-picker .intercom-reaction:active {
    -webkit-transform: scale(1.4);
    -ms-transform: scale(1.4);
    transform: scale(1.4);
    -webkit-transition: -webkit-transform .04s;
    transition: -webkit-transform .04s;
    -o-transition: transform .04s;
    transition: transform .04s;
    transition: transform .04s, -webkit-transform .04s
}
.intercom-reaction-picker-reaction-selected .intercom-reaction {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%)
}
.intercom-reaction-picker-reaction-selected .intercom-reaction-selected {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    -webkit-transform: scale(1.32);
    -ms-transform: scale(1.32);
    transform: scale(1.32)
}
.intercom-reaction-picker-reaction-selected .intercom-reaction-selected:hover {
    -webkit-transform: scale(1.32);
    -ms-transform: scale(1.32);
    transform: scale(1.32)
}
.intercom-reaction-picker-reaction-selected .intercom-reaction-selected:active {
    -webkit-transform: scale(1.32);
    -ms-transform: scale(1.32);
    transform: scale(1.32)
}
.intermoji-default-class {
    background: url(https://static.intercomassets.com/alexandria/assets/emoji-spritemap-32-148a4a6a2d1fdd0c7b50cf0f760692515d2f775104d1935d6aba15fc21af72b2.png);
    position: relative;
    top: 2px;
    margin: 1px
}
/* FIM BOTÕES DE REAÇÕES*/

Para finalizar, precisamos da animação, e claro, dos emojis. Porque, mais uma vez, o Blogger não nos dá essa possibilidade.

Aperte as teclas CTRL + F novamente, e dentro da barra de pesquisa, digite:

</body>

Acima desse código, coloque o script:

<script async='async' src="https://static.intercomassets.com/alexandria/assets/application-d1f56ac2d9a90e64c3156d7ef53701ccbc10cc933f0ef6f3aba2dc9ffd0b9e86.js"></script>

Salve e verifique se está funcionando.