Menu de redes sociais fácil de instalar na 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> 
Créditos Sugoi Tutoriais.
Odnei Sales
Odnei Sales

This is a short biography of the post author. Maecenas nec odio et ante tincidunt tempus donec vitae sapien ut libero venenatis faucibus nullam quis ante maecenas nec odio et ante tincidunt tempus donec.

Nenhum comentário:

Postar um comentário