Menu de Redes Sociais na vertical com efeitos CSS

Todos já sabem que a Redes Sociais são ótimas ferramentas de divulgação para qualquer projeto que envolve a internet, e está evoluindo cada ano que passa, e por este motivo devemos estar ligado a elas, principalmente para nós blogueiros, colocar redes sociais em nosso blog é algo tão importante quanto a qualidade de um artigo, e por esse motivo hoje trago a vocês um menu vertical com efeitos CSS muito elegante.

OBS: Recomendamos que faça um backup antes de mexer no código do seu template, caso ocorra algum erro terá como recuperá-lo evitando qualquer transtorno no final.

Demonstração

Veja também >> Menu de redes sociais animado com css3

Vamos ao Tutorial:

1º- Clique em Editar HTML e expandir modelos de widgets.
2º - Aperte Ctrl+F e procure por </head> e cole antes o seguinte código.

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/mootools-1.2.4.js' type='text/javascript'/>

3º Depois da mesma tag </head> cole.

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/botonesanimados.js' type='text/javascript'/>

4º Agora iremos aplicar o CSS, para isso basta procurar por ]]></b:skin> e antes dele cole o seguinte código.

.button_wrap{ position:relative; width:225px; height:36px; overflow:hidden; font-weight:bold; font-size:11px; margin:10px;
}
.button_aRight{ width:70px; height:36px; -moz-border-radius:20px; -webkit-border-radius:20px; background-color:#093d6f; color:#fff; top:0px; left:0px; position:absolute; line-height:36px; text-align:right;
}
.button_aRight span{ /* display:none; */ visibility:hidden; padding-right:20px; color:#fff;
}
.button_bRight{ width:64px; height:30px; background-color:#fff; -moz-border-radius:20px; -webkit-border-radius:20px; color:#000; position:absolute; top:3px; left:3px; text-transform:uppercase; line-height:30px; text-align:center; cursor:pointer;
}
.button_bRight span{ color:#fff;
}
.button_c{ background-color:#fff; color:#fff; text-transform:uppercase;
}
.button_c span{ color:#093d6f;
}

5º E por último vá em layout >> adicionar widget >> HTML/javaScript e cole o código abaixo.

<div class="button_wrap">
<a class="button_aRight" id="button_aRight"><span>Siga-me no Twitter</span></a>
<a href="URL-DO-TWITTER" target="_blank" class="button_bRight slidebttn" id="button_bRight">Twitter <span></span></a>
</div>
<div class="button_wrap">
<a class="button_aRight" id="button_aRight"><span>Siga-me no Facebook</span></a>
<a href="URL-DO-FACEBOOK" target="_blank" class="button_bRight slidebttn" id="button_bRight">Facebook <span></span></a>
</div>
<div class="button_wrap">
<a class="button_aRight" id="button_aRight"><span>Siga-me no Google+</span></a>
<a href="URL-DO-GOOGLE+" target="_blank" class="button_bRight slidebttn" id="button_bRight">Google+ <span></span></a>
</div>

Troque a escrita em azul pela URL das redes sociais e pronto.