Gadget flutuante de redes sociais para compartilhamento para Blogger

As redes sociais atualmente são extremamente usadas, o que faz delas um ótimo meio para divulgar o blog. E uma ótima forma de divulgar nosso conteúdo nesses locais tão acessados, é disponibilizar uma forma de o próprio visitante compartilhar nosso conteúdo. E podemos conseguir isso com simples gadgets, inclusive, mostrarei um nesse post.

Veja um exemplo do Gadget:

Colocando o CSS

Siga para “design”-> “editar HTML” e procure pela linha ]]<b:skin>. Cole logo ANTES dessa linha, o seguinte código:

.addthis_toolbox3.atfixed {
position:fixed;
background: #252525;
top:2%;
right:20px;
border:3px solid #da3300;
width:380px;
padding:5px 5px 1px;
}
.addthis_toolbox3 .custom_images3 a {
width:50px;
height:50px;
cursor:pointer;
margin:0;
padding:0;
}
.addthis_toolbox3 .custom_images3 a img {
border:0;
opacity:1px;
margin:0 0 1px;
}
.addthis_toolbox3 .custom_images3 a:hover img {
opacity:0.75px;
margin:1px 0 0;
}

Você pode mudar…Em azul, representa a cor de fundo do gadget e em vermelho, representa a cor da borda, mude as cores de acordo com seu gosto.

Colocando a estrutura

Depois, procure pela linha: </body>, e cole logo ANTES, o seguinte código sem fazer alterações:

<div class=”addthis_toolbox3 atfixed”>
<div class=”custom_images3″>
<a class=”addthis_button_facebook”><img src=”http://i21.servimg.com/u/f21/16/41/99/78/facebo10.png” alt=”Facebook” /></a>
<a class=”addthis_button_twitter”><img src=”http://i21.servimg.com/u/f21/16/41/99/78/twitte10.png”  alt=”Twitter” /></a>
<a class=”addthis_button_orkut”><img src=”http://i21.servimg.com/u/f21/16/41/99/78/orkut10.png” alt=”Orkut” /></a>
<a class=”addthis_button_myspace”><img src=”http://i21.servimg.com/u/f21/16/41/99/78/myspac10.png” alt=”My Space” /></a>
<a class=”addthis_button_favorites”><img src=”http://i21.servimg.com/u/f21/16/41/99/78/favori10.png” alt=”Favoritos” /></a>
<a class=”addthis_button_Youtube”><img src=”http://i21.servimg.com/u/f21/16/41/99/78/youtub10.png” alt=”Youtube” /></a>
<a class=”addthis_button_more”><img src=”http://i21.servimg.com/u/f21/16/41/99/78/more11.png” alt=”Mais…” /></a>
</div>
</div>
<script type=”text/javascript” src=”http://s7.addthis.com/js/250/addthis_widget.js”></script>

Feito isso, salve o modelo e visualize!