Nova box d/ compartilhar posts

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 == "item"'>
<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></a>

<div class='social'>
<ul class='icons'>
<li class='drop-li'><a class='drop-a' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTkGrBODaMg3k6T5JSQNDjsV5fV6aRcjg9vB4ptf5T7Li6C6MQzX8bC1y1O2ls7LSnsJMC4a6tL9VIrsdcpwJavWfQnAyZFpc-cR7QPoL51w7XiEN6fHccEgUHb4y2pxswWhGUeVe1FJ9_/s0/facebook_small.png'/></a></li>
<li class='drop-li'><a class='drop-a' expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_b8az-b9XwIujDh-cYx4Oz5XpXdqHdPlKXKvppNbj5RtAbrMIvhMBIduFiP7gtulmR1hBKUFcNxqx8FpveV7COJ_AjWDQHLWveFTE0Cr3i32Gf4MqVnSwPOFWjb1m2wjBDbFOjLANoqVN/s0/twitter_small.png'/></a></li>
<li class='drop-li'><a class='drop-a' expr:href='"http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDGJbhDlmIYSeaVkUtRKK7MOUDqajDySROOCXOSCT-zJtfe0RFPoEmckDngVGylux_rApkt95foMjEZ5S4pjLzWpqO6n61S5-xslYiEBMbVMK21-cR-e8V5oytRtJzZWbR_qXO__tu4GNJ/s0/stumbleupon_small.png'/></a></li>
<li class='drop-li'><a class='drop-a' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiI9N5S4diTBrjGXjX7BnN3UgKdUCu2iDG2C7VJ04uByZ1zth-kqBLHsGQylV_MQd3aIMt9La0K340oe8cW8fC4gOBPHJvyaqTVNNLtA4QhvvvWzIc-52xAyu8YJ0GPLUu2V3k8O89Gbd9/s0/digg_small.png'/></a></li>
<li class='drop-li'><a class='drop-a' expr:href='"http://www.technorati.com/faves?add=" + data:post.url'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrqgVpOgdk9nDLoHlxN-gPtlmVtWakFiEcjzbxjTDLuIIzYb3agvAu4cr5tdOk8Pygq3pVnZMILoKCGep1aClj8WXobKNpplTuUWgS6Q8KNELlUiZNVWJg0uzq-D2CfbYkN5yWItgo-TLg/s0/technorati_small.png'/></a></li>
<li class='drop-li'><a class='drop-a' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFVnFdZhT-rwazU5IUdb9_lGTtoCmWs7t7Ho6siQtkZD2Q9zrnWMZudcukyEw_qvUaQPaoD2KOTo-_9QN9GAvE96VKYA52rPXARost65myfkauMY8jJsuLJvAV8QS8P50CeNLRgslKcNKC/s0/reddit_small.png'/></a></li>
<li class='drop-li'><a class='drop-a' expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&title=" + data:post.title'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6SNqC7vVZCLwgQ2-JlxXy25T1AEK541CWLEx8-soIXR4M1MbUmibaEJl9PIkOGO0JvHmN6R3pgZY-RaUHnr4srwTT-Cmec5GlPNz-4ucY39KBD_clkLY4ZRO0KTmsNuRBPGaUEE47xLhH/s0/yahoo_small.png'/></a></li>
<li class='drop-li'><a class='drop-a' expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvGUyq7zA3HWe-zloRTP_68sa3mSMd-1kq380m-r43G1Ue78x6PMt7-Sq3Y6VqGcJuXo4bMit2L9FPIzXh0bHHmk1qcF0yE6QJ5AlBF8F13Y1GZ4K-9Nfxt0mYricJaG-WsdyNzqTrQOIw/s0/delicious_small.png'/></a></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...

Nova box d/ compartilhar posts

► 1

► box r sociais

► Cartita

B-T

Nova box d/ compartilhar posts

1 comentários:

Ajuda

Feed

Eu aqui

Recomendo

Estatísticas

…

…

…