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 "]]>". 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(http://4.bp.blogspot.com/-M_utSb-nN04/U6V8Gut9dJI/AAAAAAAAAjE/6g1X58pjjcg/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(http://4.bp.blogspot.com/-M_utSb-nN04/U6V8Gut9dJI/AAAAAAAAAjE/6g1X58pjjcg/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 "
