Botão Retweet Topsy no Blog

Hoje ensinarei como colocar o botão retweet, o mesmo que uso aqui no blog, como mostra a imagem abaixo.

Com ele você permitirá que as pessoas retweetem as sua postagens, ou seja, quando elas clicarem no botão, o seu post será divulgado no twitter de quem clicar.

Ou até mesmo você poderá utilizá-lo para divulgar seus posts em seu twitter.
E o melhor, é que você pode escolher a cor que mais combina com o seu blog para usar, pois ele possui mais de uma opção de cores!
Os modelos são os seguintes:

Para usá-los você acessa o painel do Blogger e clique em Layout (Design) -> Editar HTML -> Marque a opção Expandir Modelos De Widgets.

Para colocar alinhado a direita do primeiro parágrafo (como aqui no Blog)

Pressione as teclas ctrl+F e digite na caixinha que aparecerá no canto direito da tela o seguinte código:

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

e cole logo abaixo o código do botão a seguir:

<div style="float:right;padding:5px;"><script type='text/javascript'>

     var topsy_nick = &#39;alinestarblog&#39;;

     var topsy_style = &#39;big&#39;;

     var topsy_theme = &#39;blue&#39;;

     var topsy_url = &#39;<data:post.url/>&#39;;

     var topsy_title = &#39;<data:post.title/>&#39;;

</script>

<script src='http://cdn.topsy.com/button.js' type='text/javascript'/></div>

*Agora você deve alterar o texto em rosa onde está o nome do meu twitter pelo do seu.
*Na parte que está em azul, onde diz blue você colocará o nome da cor que quer usar.
Os nomes estão na imagem acima, cada cor tem seu nome referente. Por exemplo, se quer continuar usando o botão azul, não precisa alterar nada, deixe com o nome blue.
Mas se quiser usar o rosa, por exemplo, deverá trocar o nome blue por hot-pink.
*Se quiser que o botão fique no canto esquerdo da página, deverá substituir right por left.
*Se você quiser que o botão fique compacto, troque o nome big por small. O botão compacto ficará como mostra a imagem abaixo:

Para colocar na linha do Rodapé (Depois da Postagem)


Pressione as teclas ctrl+F e digite na caixinha que aparecerá no canto direito da tela o seguinte código:

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

Dependendo o modelo do seu template, o código poderá ser assim:

<div class='post-footer-line post-footer-line-3/'>

ou assim:

<p class='post-footer-line post-footer-line-3'/>

Feito isso, cole o mesmo código do botão acima mencionado. Esse aqui:

<div style="float:right;padding:5px;"><script type='text/javascript'>

     var topsy_nick = &#39;alinestarblog&#39;;

     var topsy_style = &#39;big&#39;;

     var topsy_theme = &#39;blue&#39;;

     var topsy_url = &#39;<data:post.url/>&#39;;

     var topsy_title = &#39;<data:post.title/>&#39;;

</script>

<script src='http://cdn.topsy.com/button.js' type='text/javascript'/></div>

E faça as alterações, de acordo com a sua preferência, como ensinei acima.

Visualize se está tudo ok e salve!

Prontinho! 

Espero ter ajudado! 

Tutorial elaborado por Aline.A cópia total ou parcial deste artigo é proibida!Se aprendeu aqui,não custa creditar!