Instalando o botão "Curtir", "Tweet" e "+1" em blogs do Blogger

O Facebook e o Twitter são redes sociais muito utilizadas, sendo assim cada uma tem seus widgets. Mas você vê em todos os blog e também aqui, os botões de Curtir (Like) e Tweet. Para adicionar estes botões basta fazer algumas coisinhas no seu HTML. Vamos conhecer?

1. Clique na guia Modelo e clique no botão Fazer backup/Restaurar e faça o download de seu modelo clicando em Fazer download completo do modelo.

2. Feche a janela e clique no botão Editar HTML.

3. Clique na opção: "Expandir modelos de widgets".

4. Pressione Ctrl+F do seu teclado para abrir o Localizador e procure pela linha HTML.

<div class='post-header-line-1'/>

5. E imediatamente, insira este código logo abaixo da linha em HTML:

<b:if cond='data:blog.pageType == &quot;item&quot;'><div style='float: left; margin: 3px;display: inline;'><a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:20px'/><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone></div></b:if>

 6. Caso queira inserir no código com uma borda dentro de uma caixa.

<b:if cond='data:blog.pageType == "item"'>

<div style="border:1px solid #DDD;-moz-border-radius:6px;-webkit-border-radius:6px;-goog-ms-border-radius:6px;border-radius:6px;margin:10px 0px 10px;">

<table border='0' cellpadding='5' cellspacing='0' width='100%'>

<tr>

<td style='text-align:justify;'>

Gostou deste artigo? Então clique no botão ao lado para curti-lo e Twitta-lo!! Aproveite para nos <a href="link do seu facebook" target="_blank">adicionar no Facebook</a>, seguir no <a href="link do seu twitter" target="_blank">Twitter</a> e assinar nosso <a href="link do seu feed" target="_blank">Feed</a>.

</td>

<td style='text-align:right;'>

COLE O CÓDIGO ACIMA AQUI!

</td>

</tr>

</table>

</div>

</b:if>

Lembre-se de fazer as modificações nos locais indicados!

7. Visualize seu modelo clicando em no botão Visualizar, se estiver tudo correto, clique no botão Salvar.

8. Para podê-lo deixar tanto visível na página inicial do blog quanto nas postagens, basta apagar as partes em negritos dos códigos dos passos 5 e 6.

Atualização — 05.02.2013 às 20h27m