Botões para Compartilhar nas Redes Sociais Top Design

xcelente opção para que os visitantes de seu blog possam compartilhar suas postagens nas redes sociais.

Compartilhar nas redes sociais pode ser a melhor opção para que seus trabalhos cheguem a o publico alvo desejado. Devido à popularidade, o uso diário e a possibilidade de expansão, as redes sociais chegaram a um ponto de utilidade além do simples contato entre amigos e informações de empresas a consumidores. Hoje, todos podemos nos aproveitar desse grande espaço para ter a visibilidade que precisamos e levar nossos trabalhos e experiências às pessoas interessadas.

Aqui no ProDeveloper já divulgamos vários códigos destinados à divulgação de seu blog nas redes sociais e, mais uma vez trazemos uma grande opção para que você possa ter em sua página. 

Botões de compartilhamento nas redes sociais, aqueles mesmos que você vê na maioria de sites e blogs logo no final de cada artigo publicado, mas com uma diferença, esse é um top design. Para que você possa ter uma ideia, deixamos logo abaixo as imagens referentes a esses botões depois de instalado o código em seu blog. 

Contendo botões em linhas curvas com as principais redes sociais disponíveis e além disso um belo efeito ao passar o mouse que eleva o nome da rede social correspondente e deixa as outras opções "inativas" com um tom de opacidade mais claro, função essa que serve para destacar a opção que o visitante passou o mouse.

A seguir, você pode se ter uma ideia de como ficará após instalado em seu blog.

Widget depois de instalado:

Widget instalado com seu efeito ao passar o mouse:

Gostou do design e era esse que você estava esperando para seu blog? Então veja a seguir como é simples de instalar em seu blog.

" Recomendamos que antes de qualquer alteração no código faça um backup do template. Caso ainda não saiba como proceder, acesse o artigo Como Fazer Backup do Blog."

Coloque fácil em seu blog

>> Acesse seu blog, vá em "Modelo" e depois "Editar HTML".

>> Clique no código de seu template, pressione "CTRL+F" e pesquise por <data:post.body/>

>> Logo ABAIXO, cole o seguinte código:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div style='text-align: center;'>
    <h6 style='text-align: center;font-size: 18px;line-height: 24px; margin: 10px 0;'>Gostou do Conteúdo? Compartilhe com seus amigos!</h6>
<ul class='abt-social' id='abt-cssanime'>
<li class='abt-facebook'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><strong>Facebook</strong></a>
</li>
<li class='abt-twitter'>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
</li>
<li class='abt-googlebuzz'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' target='_blank'><strong>Google+</strong></a>
</li>
<li class='abt-stumbleupon'>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
</li>
<li class='abt-digg'>
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Digg</strong></a>
</li>
<li class='abt-delicious'>
<a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>
</li>
<li class='abt-linkedin'>
<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;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
</li>
<li class='abt-reddit'>
<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Reddit</strong></a>
</li>
<li class='abt-technorati'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>
</li>
      </ul></div></b:if>

* A parte destacada em VERMELHO, representa o estilo do título, altere caso desejar.

* A parte destacada em AZUL, representa o título, altere caso desejar.

>> Agora pesquise por ]]></b:skin>

>> Logo ACIMA do trecho encontrado cole o seguinte código:

/*CSS COMPARTILHE REDES SOCIAIS DESIGN-------*/
ul.abt-social li { display:inline; float:left; background-repeat:no-repeat; }
ul.abt-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
ul.abt-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);}
ul.abt-social li.abt-facebook { background-image:url("http://4.bp.blogspot.com/-bVPJekAI5Ec/UsFYGinZj1I/AAAAAAAAAOU/klQlFmHIT1s/s1600/Facebook.png"); }
ul.abt-social li.abt-twitter { background-image:url("http://1.bp.blogspot.com/-q3_eqBxX7eE/UsFYM-oz2RI/AAAAAAAAAOc/iVBGWx4suvQ/s1600/Twitter.png"); }
ul.abt-social li.abt-googlebuzz { background-image:url("http://1.bp.blogspot.com/-DXqNtDpydnk/UsFYSyV1_JI/AAAAAAAAAOk/Dxw6g5_clB8/s1600/Google-Plus.png"); }
ul.abt-social li.abt-stumbleupon { background-image:url("http://3.bp.blogspot.com/-iWK9X7c887g/UsFYZwE1fTI/AAAAAAAAAOs/Q4ZjC_e4Em8/s1600/Stumble-Upon.png"); }
ul.abt-social li.abt-digg { background-image:url("http://1.bp.blogspot.com/-i9F9OAhz7kk/UsFYhJ2WKzI/AAAAAAAAAO0/4DtY6gxQT4c/s1600/Digg.png"); }
ul.abt-social li.abt-delicious { background-image:url("http://4.bp.blogspot.com/-jrGhcP7ITAU/UsFYo8ClCWI/AAAAAAAAAO8/OySQFu6w5AM/s1600/Delicious.png"); }
ul.abt-social li.abt-linkedin { background-image:url("http://3.bp.blogspot.com/-dvXWJsb_8E0/UsFYvQGKdrI/AAAAAAAAAPE/fWUh4S7nk7Y/s1600/Linkedin.png"); }
ul.abt-social li.abt-reddit { background-image:url("http://3.bp.blogspot.com/-5ylR-HM50ko/UsFY2NXidCI/AAAAAAAAAPM/2TZbyqv4O6A/s1600/Reddit.png"); }
ul.abt-social li.abt-technorati { background-image:url("http://2.bp.blogspot.com/-Wla300D4WXM/UsFY-8VvIDI/AAAAAAAAAPU/9xSbYyToAeE/s1600/Technorati.png"); }
#abt-cssanime:hover li { opacity:0.2; }
#abt-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#abt-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#abt-cssanime li:hover { opacity:1; }
#abt-cssanime li:hover a strong { opacity:1; top:-10px; }

* A parte destacada em VERDE, representa largura e altura dos itens, além do espaçamento entre eles. Ajuste caso suceder alguma interferência ao tamanho do widget em seu blog.

>> Clique em "Visualizar", não encontrando nenhum erro clique em "Salvar Modelo".

>> Vá em seu blog e veja como ficou.

ATENÇÃO: Esse widget poderá ficar com um tamanho desigual a seu blog por questão de sua largura e espaçamento. Caso fique, ajuste-o pelo CSS ou à medida do possível, aumente a largura da área de posts de seu blog.