Boas tardes ,vim trazer aqui uma partilha de box compartilhar as postagens do blog.
Pode vêr na imagem acima o resultado finál ,é bem simples esta box ,fundo de gradiente ,border radius etc...
Veja como fica online :  ENTRE AQUI...

Antes de tudo faça uma cópia do seu template...

Vá no seu painel do blog depois modelo e editar html e procure este código:


Encontre o código a vermelho e coloque meu código abaixo;

Aqui meu código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#bt-share_box, #bt-share_box ul {padding:0; margin:25px; list-style:none; }
#bt-share_box {padding:2px;}
#bt-share_box a.sharetext {
display:block; height:30px; line-height:35px;
padding-left:5px;
cursor:pointer;}
#bt-share_box a.sharetext img {
border: 0 none;
display: block;
margin-left: 0px;}
#bt-share_box .social {
background:-webkit-gradient(linear, 80% 20%, 10% 21%, from(#8664AC), to(#FF4E28));
height: 113px;
left: 0px;
position: relative;
top: -3px;
width: 0;
transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-webkit-transition: width 1s ease-in-out;}
#bt-share_box .social ul {
background:-webkit-gradient(linear, 80% 20%, 10% 21%, from(#e80c64), to(#64e80c));
border:1px solid #ddd;  
list-style:none;
position:absolute;
top:-27px;
width:420px;
height:32px;
border-left:0;
left:0px;
padding-right:2px;
z-index: 1;
overflow: hidden;
padding-left: 35px;
transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
 -moz-box-shadow: 0px 0px 9px #f751f7;
-webkit-box-shadow: 0px 0px 9px #f751f7;
box-shadow: 0px 0px 9px #f751f7;}
#bt-share_box .social ul li {float: left;}
#bt-share_box .social ul li a{}
#bt-share_box .social ul a img {}
#bt-share_box .social ul li.drop-li {position:relative; width:35px; height:30px; float:left; z-index:100; margin-top: -2px;padding-left: 15px;}
#bt-share_box .social ul li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}
#bt-share_box .social ul li.drop-li a.drop-a img {display:block; border:0; position:absolute; left:5px; top:5px; z-index:-1; opacity:1; filter: alpha(opacity=100);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
</style>
<div id='bt-share_box'>
<a class='sharetext'><b></b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class='social'>
<ul class='icons'>
<li class='drop-li'><a class='drop-a' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><img alt='' src='http://3.bp.blogspot.com/-AJyGFFlYyOU/UUpmagkr0KI/AAAAAAAABmM/wOBFlSWNxIE/s000/facebook_small.png'/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class='drop-li'><a class='drop-a' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><img alt='' src='http://4.bp.blogspot.com/-lEVf1kNORkw/UUpmbLZtkiI/AAAAAAAABmU/i3cjvoW6FsQ/s000/twitter_small.png'/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class='drop-li'><a class='drop-a' expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><img alt='' src='http://1.bp.blogspot.com/-hcdOF0XSvHM/UUpmbY6HuAI/AAAAAAAABmc/RdgrHuyu50U/s000/stumbleupon_small.png'/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class='drop-li'><a class='drop-a' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><img alt='' src='http://4.bp.blogspot.com/-_fQiVXfctJ8/UUpmbojTuUI/AAAAAAAABmk/JKopPkvSlvw/s000/digg_small.png'/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class='drop-li'><a class='drop-a' expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url'><img alt='' src='http://4.bp.blogspot.com/-rkiAXaKwkAs/UUpmcSdgOLI/AAAAAAAABms/4qfEe_cg2Ts/s000/technorati_small.png'/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class='drop-li'><a class='drop-a' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><img alt='' src='http://3.bp.blogspot.com/-IEE8WuvppRw/UUpmcsa5mzI/AAAAAAAABm0/Qlcj2wVfYkw/s000/reddit_small.png'/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class='drop-li'><a class='drop-a' expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><img alt='' src='http://1.bp.blogspot.com/-6MHubqJ4lAE/UUpmc0_lxtI/AAAAAAAABm8/-9AGdKR9XTw/s000/yahoo_small.png'/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class='drop-li'><a class='drop-a' expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><img alt='' src='http://1.bp.blogspot.com/-qVm5bNNFg4U/UUpmdGU17dI/AAAAAAAABnE/d1sSIPVhzgA/s000/delicious_small.png'/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
</ul>
</div>
</div>
</b:if> 
Notas;  margin:25px; procure este código a vermelho e troque ele consuante a largura da sua área de post...
Exemplo margin: 35px irá andar box para baixo e direita...
Exemplo margin: 15px irá subir a box e andar para esquerda...
Mude o numero até centralizar ...
Espero que tenha sido útil até mais...

1 comentários:

comentários
 
 
Back to top

Estatísticas

  • Postagens
  • Comentários
  • Visualizações
🔗 Contato✔ Apoio 🔗
Reservado © 2016 ❝ Autôr