Botões de compartilhar com efeitos para seu blog

Olá galera no artigo anterior eu ensinei como colocar um menu de redes sociais animado com css, hoje mais um vez vamos falar de redes sociais, mas dessa vez são botões de compartilhamento completo com efeito de opacidade,  ótima opção para o leitor dividir um artigo com seus amigos e deixar o blog com outro visual, claro que sem perder o costume recomendo que faça um backup do layout.

Foto demostrativa

Ver demostração

1º- Clique em Editar HTML e expandir modelos de widgets.

2º- Aperte Ctrl + F e procure por <div class='post-footer-line post-footer-line-3'>  cole Abaixo o seguinte código.

<style type='text/css'>
.custom_images ul {display:inline; list-style:none}
.custom_images ul li {float:left; margin-right:1px}
</style>
<div class='addthis_toolbox'>
<div style='margin: 50px 0px 10px; font-size: 30px;'>Compartir este Post</div>
<div class='custom_images'>
<span class='fade'><ul>
  <li><a class='addthis_button_facebook'><img alt='Share to Facebook' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2rPlwAQUis48VAPZxspA1U3Ib1rI7KLhA-LbiLlB5FRUT_HxxDsH8ydkIjgRMBFYGpRmQpPx4OwwmYliZcMg-OdegWEnsTZlhsaqpMI1lkwcNQNBJJIg7033uXnNcr2H-XkkJSI2SoKHF/s57/Facebook%2520alt%25202.png' width='57'/></a></li>
  <li><a class='addthis_button_twitter'><img alt='Share to Twitter' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQTub3_Amz7NyXJG97QCQTb_EKcgHolEocrJSkKuaGTq8bqx0tD_rxanG-2GKTX8VoVd10UNIYYIRfdl5gO2c1z0yrL2hYu6uMc01z8arcwYkZj9wQVHFqc6z5k-H9g5tOiG6W65HbsPRc/s57/Twitter%2520alt%25204.png' width='57'/></a></li>
  <li><a class='addthis_button_google_plusone_share'><img alt='Share to Google+' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh31z8Jnvfh8J6K-H1wEK2bKwwmT8p7Ho84aXD-PK4o3jXgr0FNMKp3lRGcrr4vhBHbMQq294I4ER3gEgwe2yxNw7IXY_3ylJ_jaWqBdqGjAFH8phAblzEPLJscZHtD_tOoI5ogangUQHGZ/s57/Google%252B%2520alt%25202.png' width='57'/></a></li>
  <li><a class='addthis_button_stumbleupon'><img alt='Share to Stumble Upon' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfXhBaXoLjazxftaUs7jR9q3NRjNSY2zArAfneAemP_C1WbNZvi2jPLuh40FokZGkV_F3TPF3YbEEXP3Bv98b9TvnD5rd6pq7ZYa0ksgzgYWhWsRXwAWEIv7tOTBvB6-ie_vROLAI98zNm/s57/StumbleUpon%2520alt.png' width='57'/></a></li>
  <li><a class='addthis_button_evernote'><img alt='Share to Evernote' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ_risOcHEylbSmTn-8XLkjci1uefbY6lD6LagFcYSEf1jMYN0ezrzTv1tq-a4Ev_kwvkcJ_1ik3te7r0i-Oyy3Z4tFrsznpUC8NKMbDKP3pfOlIbI-WnFAA9N9qMX7Z583R-du_mJjIlo/s57/evernote-icon.png' width='57'/></a></li>
  <li><a class='addthis_button_blogger'><img alt='Share to Blogger' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjojeKpfC_s6rgh4OAWzKvOwmYwPaW6-HNGgLZbFnNQeUX-7HDNfdezkxYShbm412TU33YzIGOcXcXmrw6WcuxOtKdEyVmwbWWHKV32kgRWeBwCpaiX88ihnGApLEHe9ugetPB23Jnkp0_O/s57/Google%2520Blogger.png' width='57'/></a></li>
  <li><a class='addthis_button_email'><img alt='Share to Email' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk3QFmGvcHqoev7wWKOI2iyicqCN9_02NuMMystZ3LPOrtb1QaUDRvlqHzYIei7bpFgKcdAEsgizlt-tk6e_Q8AHQi9DzViGyHREol-U7RlZi5hyphenhyphenDIHmqpND0YuG2XfFt8e0xlo2zmoopc/s57/Mail%2520alt.png' width='57'/></a></li>
  <li><a class='addthis_button_yahoomail'><img alt='Share to Yahoo Messenger' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBOC0hC54Wk89ZhANB2ahutcEf-H_1BJ3PRHZ6RcOFNXHdhGxVp-SZWiOLJWxcLP9DNkCcXw-hWmWYThDa9SevyZGKsYYsBfm05BkMO_qXEoNChfDv3oOh9mnakwQ7rIrBGGSYqBI8bk_A/s57/Yahoo%2521%2520alt%25201.png' width='57'/></a></li>
  <li><a class='addthis_button_more'><img alt='More...' border='0' height='57' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI8A-Y7t57YAeQ3Dgc-UkYn7fcFg59iCNXSra5ZfuHu4fqMo84VevHvE0fs02WA9vEpqL63LT9ff4zxTa_wITd5YFcaqzFUTz78ZvANWj2tI0XFYdU8gORDmTTgfi02r7fWKedPjCIqX4q/s57/Share%2520alt%25201.png' width='57'/></a></li>
</ul></span>
</div>
</div>

 Obs: o numero 57 destacado de vermelho é o tamanho do icone, troque pelo tamanho que deseja

3º- Agora procure por </body> e logo a cima cole o seguinte código.

<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=nguoiaolam' type='text/javascript'/> 

Salve e pronto