Menu de redes sociais animado com css3

Olá queridos leitores, o blog com poucos dias de vida já vem ganhando elogios bacanas de quem passa por aqui e fico muito satisfeito em ver que meu trabalho está agradando vocês, pelo menos é o que eu acho. Então por isso vou presenteá-los com um menu de redes sociais animados com css3, ótimo para dar um estilo diferente em seu blog, Antes recomendo que Faça um bakup deu seu layout caso ocorra algum erro terá como recuperá-lo.  

Clique aqui e veja demostração

  Vamos ao Tutorial.

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

2º- Aperte Ctrl + F e procure por ]]></b:skin> e cole antes o seguinte código.

}

.nav-tt{

 padding: 50;

 width: 70%;

 height: 70px;

 margin: 80px auto 30px auto;

}

.nav-tt li{

 float: left;

 list-style: none;

}

.nav-tt li a{

    display: block;

    width: 40px;

    height: 40px;

    margin: 0 2px;

    outline: none;

 position: relative;

 z-index: 2;

    text-indent: -9000px;

    text-decoration: none;

}

.nav-tt li .gplus{

    background: url(https://lh4.googleusercontent.com/-4cFkVuK-J9o/UHxDNROuW2I/AAAAAAAAElY/abNRRK-8Qqc/s128/google_plus.png) no-repeat;

}

.nav-tt li .twitter{

    background: url(https://lh4.googleusercontent.com/-wfBGqdU25u0/UHxDPNm_SgI/AAAAAAAAEl4/7k_oJBtjSJY/s128/twitter_1.png) no-repeat;

}

.nav-tt li .pinterest{

    background: url(https://lh3.googleusercontent.com/-qyf8onE2vGQ/UHxDOOke6YI/AAAAAAAAElo/2fVKKCD2Kvw/s128/pinterest.png) no-repeat;

}

.nav-tt li .facebook{

    background: url(https://lh6.googleusercontent.com/-MJZ3ppOsD3g/UHxDNlVHuxI/AAAAAAAAElg/k8f5b_DVM4E/s128/fb_1.png) no-repeat;

}

.nav-tt li .linkedin{

    background: url(https://lh5.googleusercontent.com/-2-olf15YoqY/UHxDNzIdb1I/AAAAAAAAElk/5kHZeTBfdlA/s128/linkedin.png)no-repeat;

}

.nav-tt li .tumblr{

    background: url(https://lh5.googleusercontent.com/-6rP4L0v2_68/UHxDO2hBAJI/AAAAAAAAEls/tm1r69EhCRw/s128/tumblr.png) no-repeat;

}

.nav-tt li .youtube{

 background: url(https://lh5.googleusercontent.com/-X49px-YaEfY/UHxDPEPM7DI/AAAAAAAAEl0/230Z4oxHNzE/s128/you_tube.png) no-repeat;

}

.nav-tt li .mail{

 background: url(https://lh4.googleusercontent.com/-Z4beVXz8HJI/UHxDNbnCR2I/AAAAAAAAElU/BfBkHDhqkd8/s32/email.png) no-repeat;

}

.nav-tt li .rss{

 background: url(https://lh4.googleusercontent.com/-_EyfM2ruhco/UHxDOsct_rI/AAAAAAAAEl8/GuByt66SWxk/s128/rss.png) no-repeat;

}

.nav-tt li a span{

 width: 80px;

 height: 80px;

 line-height: 80px;

 padding: 10px;

 left: 50%;

 margin-left: -60px;

 font-family: 'Alegreya SC', Georgia, serif;

 font-weight: 400;

 font-style: italic;

 font-size: 14px;

 color: #719DAB;

 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);

 text-align: center;

 border: 5px solid #ffffff;

 background: rgba(255,255,255,0.5);

 text-indent: 0px;

 position: absolute;

 pointer-events: none;

 border-radius: 50%;

 bottom: -40px;

 opacity: 0;

 box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);

 -webkit-transform: scale(0);

 -moz-transform: scale(0);

 -o-transform: scale(0);

 -ms-transform: scale(0);

 transform: scale(0);

 -webkit-transition: all 0.3s ease-in-out;

 -moz-transition: all 0.3s ease-in-out;

 -o-transition: all 0.3s ease-in-out;

 -ms-transition: all 0.3s ease-in-out;

 transition: all 0.3s ease-in-out;

}

.nav-tt li a span:before,

.nav-tt li a span:after{

 content: '';

 position: absolute;

 bottom: -15px;

 left: 50%;

 margin-left: -9px;

 width: 0;

 height: 0;

 border-left: 10px solid transparent;

 border-right: 10px solid transparent;

 border-top: 11px solid rgba(0,0,0,0.1);

}

.nav-tt li a span:after{

 bottom: -13px;

 margin-left: -10px;

 border-top: 10px solid #ffffff;

}

.nav-tt li a:hover span{

 opacity: 0.9;

 bottom: 50px;

 -webkit-transform: scale(1);

 -moz-transform: scale(1);

 -o-transform: scale(1);

 -ms-transform: scale(1);

 transform: scale(1);

}

3º- Agora cole o código seguinte onde deseja que apareça o menu.

<ul class="nav-tt">

<li><a class="twitter" href="URL-DO-TWITTER" target="_blank"><span>Twitter</span></a></li>

<li><a class="gplus" href="URL-DO-PERFIL" target="_blank"><span>Google Plus</span></a></li>

<li><a class="facebook" href="URL-DO-FACEBOOK" target="_blank"><span>Facebook</span></a></li>

</ul>

E Salve.

 Obs: No último passo você pode escolher onde deseja que o menu apareça basta colocá-lo no local desejado.