ASK: Menu redes sociais

Oi gente, mais um tutorial que foi pedido. Esse menu é bem simples. Confira o resultado e o tutorial para blogger e Wordpress.

1 - Coloque esse código no seu css.

Wordpress: Aparência > Editor > Folha de estilo (style.php)

Blogger: Modelo > Editar Html > procure a tag ]]></b:skin>  e coloque antes dela.

Código: 

.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;

2 - Coloque o código abaixo onde você quer que o menu 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> 

Tutorial feitor por Sugoi Tutoriais. Credite!