Botões de compartilhar personalizados

Views:
CÓDIGO DA FONTE ESPECIAL- COLE ABAIXO DE <HEAD>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>


CÓDIGO CSS- COLAR ANTES DE ]]></b:skin>

/*** Botões de compartilhar by Elaine Gaspareto ***/
.post-share {
text-align:center; /* ALINHAMENTO DOS BOTÕES, NÃO ALTERE */
margin-top:10px; /* DEFINE A DISTÂNCIA EM RELAÇÃO AO TOPO DO POST  */
margin-bottom:20px; /* DEFINE A DISTÂNCIA EM RELAÇÃO AO FOOTER DO POST */
background:url(http://1.bp.blogspot.com/-RaxSFprHuWw/U-eh4Hd6OgI/AAAAAAAAAP0/sijBcrNVTjo/line.gif) repeat-x center center; /* LINHA DOS BOTÕES, APAGUE SE PREFERIR */
}
.post-share a {
display:inline-block;
}
.share-box {
width: 47px; /* LARGURA DO BOTÃO */
height: 47px; /* ALTURA DO BOTÃO */
background: #ffffff; /* COR DE FUNDO DO BOTÃO */
color: #000000; /* COR DA FONTE */
border: 1px solid #e5e5e5; /* COR DA BORDA DO BOTÃO */
display: inline-block;
line-height: 47px; /* ALTURA DA LINHA, MANTENHA IGUAL LARGURA E ALTURA */
border-radius: 50%; /* GRAU DE ARREDONDAMENTO DO BOTÃO */
margin: 0 10px;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
}
.share-box i {
font-size:20px; /* TAMANHO DA FONTE DO BOTÃO*/
}
.share-box:hover {
background:#b792ec; /* COR DE FUNDO EM ESTADO HOVER */
border:1px solid #b792ec; /* COR DA BORDA EM ESTADO HOVER */
color:#ffffff; /* COR DA FONTE EM ESTADO HOVER */
}



CÓDIGO HTML- COLAR APÓS <div class='post-footer'>

<center>Compartilhe este post</center>
<div class='post-share'>

<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' target='_blank'><span class='share-box'><i class='fa fa-facebook'/></span></a>

<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' target='_blank'><span class='share-box'><i class='fa fa-twitter'/></span></a>

<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' target='_blank'><span class='share-box'><i class='fa fa-pinterest'/></span></a>

<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url' target='_blank'><span class='share-box'><i class='fa fa-linkedin'/></span></a>

<a expr:href='&quot;http://www.tumblr.com/share/link?url=&quot;+ data:post.url' target='_blank'><span class='share-box'><i class='fa fa-tumblr'/>                           </span></a>

<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank'><span class='share-box'><i class='fa fa-google-plus'/></span></a>


<a alt='Compartilhar no WhatsApp' data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;-&quot; + data:post.url' title='Compartilhar no WhatsApp'><span class='share-box'><i class='fa fa-whatsapp'/></span></a>

</div>


Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage