Botões de compartilhar personalizados

Views:
CÓDIGO DA FONTE ESPECIAL QUE GERA OS ÍCONES
(colar acima de <head>)

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


CÓDIGO CSS
(colar acima de ]]></b:skin>)

/*BOTÕES DE COMPARTILHAR PERSONALIZADOS BY ELAINE GASPARETO*/
.post_social_share {
display: block;
    padding: 8px 0;
    margin-bottom: 0px;
}
.post_social_share h3 {
display: block;
font-size: 14px;
line-height: 54px;
font-weight: 700;
margin-bottom: 0;
letter-spacing: 2px;
}

.post_social_share a {
   width: 42px;
    height: 42px;
    line-height: 42px;
    font-size: 20px;
    display: inline-block;
    text-align: center;
    color: #fff;
    background: #30373b;
    border-radius:50px;
    -o-border-radius:50px;
    -moz-border-radius:50px;
    -webkit-border-radius:50px;
    margin-right: 2px;
}

a.social_share.fb{background:#3F51B5;}
a.social_share.tw{background:#03A9F4;}
a.social_share.gp{background:#F44336;}
a.social_share.pi{background:#CF1B2B;}
.whats{background: #4CAF50!important;}
a.social_share.li{background:#1a7baa;}
a.social_share.em{background:#ccc;}

.post_social_share a:hover {
-webkit-transition:border-color .2s;
-moz-transition:border-color .2s;
transition:border-color .2s
}



.share_this_content a.social_share {
    font-size: 10.5px;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom:0px;
    vertical-align:top;
}
.share_this_content i{font-size:19px;}



CÓDIGO HTML
(colar abaixo da 2ª ocorrência de <div class='post-footer'>)


<center>
<div class='post_social_share'> 
<div class='share_this_content'>
   
      <a class='social_share fb' expr:href='&quot;https://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' onclick='window.open(this.href,&quot;sharer&quot;,&quot;toolbar=0,status=0,width=626,height=436&quot;); return false;' rel='nofollow' target='_blank' title='Compartilhar no Facebook'><i aria-hidden='true' class='fa fa-facebook'/></a>

      <a class='social_share tw' expr:href='&quot;https://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url' rel='nofollow' target='_blank' title='Compartilhar no Twitter'><i aria-hidden='true' class='fa fa-twitter'/></a>

      <a class='social_share gp' 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+'><i class='fa fa-google-plus'/></a>

      <a class='social_share pi' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' title='Salvar no Pinterest'><i class='fa fa-pinterest'/></a>

<a class='social_share li' expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:blog.url.canonical + &quot;&amp;title=&quot; + data:view.title.escaped + &quot;&amp;summary=&quot; + data:view.description.escaped' target='_blank'><i class='fa fa-linkedin'/></a>

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

   
    </div>
    </div>
    </center>
Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage