Botões Sociais Abaixo do Título e no Final do Post Parte-01

/**/
#pin-wrapper > a {background-image:none !important;}
/**/

Como colocar Botões Sociais nos Posts do seu Blog

Sabe os botões das redes sociais que ficam no final dos posts indicando para você curtir no Facebook, Twittar o post que gostou, recomendar no G e até pinar no Pinterest?

Pois é, existem vários sites que disponibilizam uma infinidade de modelos destes botões para você colocar em seu blog. Mas, para isso é necessário fazer um cadastro com seu email e senha para pegar o código dos botões.
Como é o caso dos sites:

Todos os 4 sites necessitam de login e senha para configurar o código dos Botões de Social Bookmarking.

Por falar nisso... »»» Você sabe o que é Social Bookmarking?

Não Se Esqueça:
» Essas configurações demandam algum conhecimento em códigos HTML e CSS. Portanto:
♥ Sempre tente antes num blogue de testes.
♥ Salve o seu template antes de começar, clicando em: Fazer backup/Restaurar
♥ Leia o tutorial até o fim e tenha certeza de ter entendido.

Há também uma forma de colocá-los sem que tenha que fazer cadastro nestes sites, que é esta que vou ensinar neste post:

Chamo-os de botões de compartilhamento automáticos.
Muito parecidos com os nativos do blogger:

Aqui no TPV uso-os na página inicial ao lado esquerdo dos posts e no interior uso os botões do Addthis - assunto para os próximos posts.

Em alguns templates que faço uso os botões sociais na horizontal no final dos posts como é o caso do Template Valentine.

Veja como fica em um post do Valentine

Estes botões na forma horizontal são ideais para colocar no final do post ou logo abaixo do título do post.

Então vamos lá:

1º Passo: Código dos Botões Sociais na Horizontal para Copiar e Colar

Este é o código dos Botões Sociais na horizontal como na imagem acima.
» Você irá copiar este código e colá-lo onde for indicado de acordo com o local onde deseja colocá-los.

(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)(0);
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/pt_BR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

//
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')(0); s.parentNode.insertBefore(po, s);
})();
//
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)(0);if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

Tweet

Observações Importantes:

♦ Para que você coloque os botões sociais deverá desabilitar os botões nativos do blogger.
♦ Isso vale tanto para estes que estou ensinando agora quanto para os outros relacionados com os sites de botões de social bookmarking que vou ensinar.
Siga as instruções desta imagem:

►Clique em Layout » em Postagens no blog clique em Editar » Desmarque a caixinha Mostrar botões de compartilhamento.

♦ Você tem a opção dos botões sociais aparecerem na página inicial e ou somente nas páginas dos posts.
Para que apareça na página inicial também basta que tire estas 2 linhas indicadas no código dos botões sociais. (a 1ª e a última)

2º Passo: Instalando os botões sociais nos posts.

1- Como colocar os botões sociais abaixo do título do post.

► Vá em Modelo » Clique em Editar HTML » Utilize Crtl F e Encontre as linhas:

Aurea