Botões do Twitter, Facebook e Google Plus para colocar no blogger

Esse era o código de botões de redes sociais, que eu estava utilizado no meu website. O código está funcionando perfeitamente, basta você fazer algumas mudanças para adaptá-lo ao layout do seu blog.



Imagem: www.jazzexpress.com.br
Antes de fazer qualquer mudança no template do seu blog, faça backup do template atual - caso dê algum erro, ou você não gostar da personalização, fica mais fácil recuperar. Acesse o painel de controle do seu blog ==> Modelo ==> Fazer backup/Restaurar ==> Salve o modelo atual.

Depois, clique em "Editar HTML ==> cole o código CSS acima de "]]></b:skin>". Personalize o CSS de acordo com as características do template do seu blog.

.share-post {

font-size: 13px; margin-top: 15px;

}

.share-post li {

float: left;

}

.share-post a {

display: block; margin-right: 10px; text-indent: -9999px; margin-left: 12px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDYMWHI3aJfjgroXOa3piep7trCSBFvFlkN_tbWwJ3WISHvYpIChJd0uBRSVXaPfpWIZJQMIrWir2VeoQylao3FgfpO6DSCnNe9pe34q90KYGClOJzs5ul-OU4eo55KC0xPxxW03zosEI/s1600/single-share.png) no-repeat; -webkit-transition: opacity .2s; -moz-transition: opacity .2s; -o-transition: opacity .2s; transition: opacity .2s;

}

.share-post a:hover {

opacity: .7;

}

.share-post .facebook a {

width: 7px;

}

.share-post .twitter a {

width: 18px; background-position: -47px 0;

}

.share-post .google a {

width: 14px; background-position: -105px 0;

}

#share-post {

width: 100%; overflow: hidden; margin-top: 20px;

}

#share-post a {

display: block; height: 32px; line-height: 43px; color: #fff; float: left; padding-right: 10px; margin-right: 10px;

margin-bottom: 25px; text-decoration: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; overflow: hidden; margin: 0 10px 10px 0;

transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; width: 125px; height: 45px; float: left; padding: 0;

overflow: hidden; text-align: center; font-weight: 600;

}

#share-post a:hover {

text-decoration: none !important;

}

#share-post .facebook {

background-color: #5bbf5b;

}

#share-post .twitter {

background-color: #5bbf5b;

}

#share-post .google {

background-color: #5bbf5b;

}

#share-post span {

display: block; width: 32px; height: 32px; float: left; padding: 6px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDYMWHI3aJfjgroXOa3piep7trCSBFvFlkN_tbWwJ3WISHvYpIChJd0uBRSVXaPfpWIZJQMIrWir2VeoQylao3FgfpO6DSCnNe9pe34q90KYGClOJzs5ul-OU4eo55KC0xPxxW03zosEI/s1600/single-share.png) no-repeat; background-position-y: 6px; background-position-x: 7px;

}

#share-post .facebook span {

background-color: #5c86f0;

}

#share-post .twitter span {

background-color: #5c86f0; background-position: -65px;

}

#share-post .google span {

background-color: #5c86f0; background-position: -137px;

}

Essa outra parte do código, você deve colocar abaixo de "<data:post.body/>" ou acima de "<div class='post-footer'>". Desta forma, os artigos relacionados irão aparecer no rodapé dos artigos do seu blog.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='share-post'>

                              <a class='facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>

                                <span/>

                                Facebook

                              </a>

                              <a class='twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>

                                <span/>

                                 Twitter

                              </a>

                              <a class='google' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,   &quot;&quot;, &quot;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;);return false;' rel='nofollow' title='Compartilhar no Google+'>

                                <span/>

                                 Google

                              </a>

                            </div>

                            <div style='clear: both;'/>

                            </b:if>

Para o código funcionar, você deve acessar a opção "Layout" ==> na opção "Postagens no blog", clique em "Editar". Ative a opção "Mostrar botões de compartilhamento". Depois clique m "Salvar".