Menu Redes Sociais

Oi gente tudo bem? vou ensinar vocês a fazerem esse menuzinho lindo

créditos 

E o melhor dele é que funciona também no Wordpress yay, vamos aprender?



1. Coloque o código abaixo
Blogger: Modelo > Editar Html > procure a tag ]]></b:skin> e coloque antes dela.
Wordpress: Aparência > Editor > Folha de estilo (style.php)

.menuu {
width: 300px;
height: 150px;
float: left;
color: #fff;
font-family: 'Gotham', sans-serif;
font-size: 15px;
}
.menuu .facebook {
background: #333333;
font-family: 'Gotham', sans-serif;
font-size: 15px;
text-align: center;
padding: 9px;
-webkit-transition:All 0.3s ease-in-out; -moz-transition:All 0.3s ease-in-out; -o-transition:All 0.3s ease-in-out;
}
.menuu .facebook:hover {background: #3B5998;-webkit-transition:All 0.3s ease-in-out; -moz-transition:All 0.3s ease-in-out; -o-transition:All 0.3s ease-in-out;
}
.menuu .twitter {
background: #808080;
color: #fff;
font-family: 'Gotham', sans-serif;
font-size: 15px;
text-align: center;
padding: 9px;
-webkit-transition:All 0.3s ease-in-out; -moz-transition:All 0.3s ease-in-out; -o-transition:All 0.3s ease-in-out;
}
.menuu .twitter:hover {background: #1BB2E9;-webkit-transition:All 0.3s ease-in-out; -moz-transition:All 0.3s ease-in-out; -o-transition:All 0.3s ease-in-out;
}
.menuu .ask {
background: #979595;
color: #fff;
font-family: 'Gotham', sans-serif;
font-size: 15px;
text-align: center;
padding: 9px;
-webkit-transition:All 0.3s ease-in-out; -moz-transition:All 0.3s ease-in-out; -o-transition:All 0.3s ease-in-out;
}
.menuu .ask:hover {background: #1B3550;-webkit-transition:All 0.3s ease-in-out; -moz-transition:All 0.3s ease-in-out; -o-transition:All 0.3s ease-in-out;
}
.menuu .instagram{
background: #C0C0C0;
color: #fff;
font-family: 'Gotham', sans-serif;
font-size: 15px;
text-align: center;
padding: 9px;
-webkit-transition:All 0.3s ease-in-out; -moz-transition:All 0.3s ease-in-out; -o-transition:All 0.3s ease-in-out;
}
.menuu .instagram:hover {background: #643D2F;-webkit-transition:All 0.3s ease-in-out; -moz-transition:All 0.3s ease-in-out; -o-transition:All 0.3s ease-in-out;

E coloca esse onde você quer que apareça ^^

<div class="menuu">
<div class="facebook">
<a href="SEU LINK">Facebook</a></div>
<div class="twitter">
<a href="SEU LINK">Twitter</a></div>
<div class="ask">
<a href="SEU LINK">Ask</a></div>
<div class="instagram">
<a href="SEU LINK">Instagram</a></div>
</div>