Botões de Compartilhamentos

Localizar:
</head>
]]></b:skin>
<div class='post-footer-line post-footer-line-1'>



CÓDIGO JAVASCRIPT:
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>


CSS:
/* CÓDIGO CSS DOS BOTÕES- DEFINE A APARÊNCIA
----------------------------------------------- */
.tlp_post_sharebar {
background:none;
position:relative;
z-index:2;
width:100%;
display:inline-block;
margin:5px 0px;
padding:10px 0;
font-family:sans-serif;
border-bottom:1px dotted rgba(0, 0, 0, 0.05);
border-top:1px dotted rgba(0, 0, 0, 0.05);
}
.tlp_post_sharebar .tlp_Share_buttons {display:block;}
.tlp_post_sharebar .tlp_Share_buttons .wrap {
display:inline-block;
text-align:center;
min-width:41px;
margin:0 auto;
}
.tlp_post_sharebar .tlp_Share_buttons .wrap1 {
float:left;
display:inline-block;
width:31px;
}
.tlp_post_sharebar .tlp_Share_buttons ul {margin:0;padding:0;}
.tlp_post_sharebar .tlp_Share_buttons ul li a, .tlp_post_sharebar .tlp_Share_buttons ul li a:hover {
display:block;
text-decoration:none;
color:#FFF !important;
cursor:pointer;
height:100%;
line-height:25px;
}
.tlp_post_sharebar .tlp_Share_buttons ul li {
float:left;
list-style:none;
list-style-type:none;
margin:1px;
padding:0;
width:16%;
max-width:115px;
display:inline-block;
overflow:hidden;
font-size:13px;
line-height:25px;
text-align:left;
height:25px;
color:#fff;
border: 1px solid rgba(0,0,0,0.04);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;
}
.tlp_post_sharebar .tlp_Share_buttons ul li .fa {
font-family:FontAwesome;
font-weight:normal;
background-color:rgba(0,0,0,0.1);
color:#fff;
font-size:17px;
display:inline-block;
text-align:center;
padding:0;width:30px;
height:25px;
line-height:inherit;
border-right:1px solid rgba(0,0,0,0.05);
}

.tlp_post_sharebar .tlp_Share_buttons .button_linkdin {background:#2554BF;}
.tlp_post_sharebar .tlp_Share_buttons .button_linkdin:hover {background:#224EB4;}
.tlp_post_sharebar .tlp_Share_buttons .button_fb {background:#3a579a;}
.tlp_post_sharebar .tlp_Share_buttons .button_fb:hover {background:#314a83;}
.tlp_post_sharebar .tlp_Share_buttons .button_twtr {background:#00abf0;}
.tlp_post_sharebar .tlp_Share_buttons .button_twtr:hover {background:#0092cc;}
.tlp_post_sharebar .tlp_Share_buttons .button_pntrst {background:#cd1c1f;}
.tlp_post_sharebar .tlp_Share_buttons .button_pntrst:hover {background:#ae181a;}
.share.h6 {width: auto !important;font-size:14px;font-weight:bold;text-shadow:none!important;text-decoration:none;text-align:center;color:#333;margin-top:3px;}
.tlp_post_sharebar .tlp_Share_buttons  {
font-size:14px;font-weight:bold;
text-shadow:none!important;
text-decoration:none;
text-align:center;
color:#333;
margin-top:3px;
}
.tlp_post_sharebar .tlp_Share_buttons .share {
border:none;
margin:0px 5px 0px 1px;
overflow:visible !important;
width:115px !important;
}
.tlp_post_sharebar .tlp_Share_buttons .button_fb .share-buttons,.tlp_post_sharebar .tlp_Share_buttons .button_twtr .share-buttons,.tlp_post_sharebar .tlp_Share_buttons .button_gplus .share-buttons,.tlp_post_sharebar .tlp_Share_buttons .button_pntrst .share-buttons,.tlp_post_sharebar .tlp_Share_buttons .button_linkdin .share-buttons {
position:relative;
color:#C3C3C3;
display:inline-block;
text-align:center;
font-weight:bold;
font-size:11px;
float:right;
min-width:12px;
font-family:sans-serif;
padding:0px 5px;
background-color:rgba(0,0,0,0.28);
border-radius:0px 0px 0px 15px;
}

HTML:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tlp_post_sharebar'>
<div class='tlp_Share_buttons'>
<ul>
<li class='share'>
<div class='share h6'>
COMPARTILHE:
</div>
</li>

<li class='button_fb'>
<a expr:href='&quot;   http://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'>
<div class='wrap1'>
<i class='fa fa-facebook'/>
</div>
<div class='wrap'>
Compartilhe
</div>
<div class='share-buttons' data-service='facebook'>
</div>
</a>
</li>
<li class='button_twtr'>
<a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @coloqueseutwitteraqui - &quot;' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'>
<div class='wrap1'>
<i class='fa fa-twitter'/>
</div>
<div class='wrap'>
Tweet
</div>
<div class='share-buttons' data-service='twitter'>
</div>
</a>
</li>
<li class='button_pntrst'>
<a data-pin-config='beside' expr:href='&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'>
<div class='wrap1'>
<i class='fa fa-pinterest'/>
</div>
<div class='wrap'>
Pin It
</div>
<div class='share-buttons' data-service='pinterest'>
</div>
</a>
</li>
<li class='button_linkdin'>
<a expr:href='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'>
<div class='wrap1'>
<i class='fa fa-linkedin'/>
</div>
<div class='wrap'>
Compartilhe
</div>
<div class='share-buttons' data-service='linkedin'>
</div>
</a>
</li>
</ul>
</div>
</div>
</b:if>