Menu para Redes Sociais #2 - Essence

"A ignorância não fica tão distante da verdade quanto o preconceito." - Denis Diderot

Hey Pessoas, como andam? Eu vou bem, graças a Deus! Percebi que várias pessoas estão elogiando o layout do blog e isso me deixa muito feliz *O* Pensando em recompensar todo o carinho de vocês, fiquei a madrugada INTEIRA de ontem fazendo um Menu para Rede Sociais exclusivo (quando eu digo exclusivo é exclusivo mesmo, nem eu cheguei a usar) o qual eu chamei de Essence (Essência), não me perguntem porque.

O Resultado ficou super bonitinho, eu pelo menos realmente gostei.

LIVE PREVIEW

Eu realmente fiquei satisfeito com o resultado desse Menu, é tão fofinho! Além de tudo é super fácil de aplicar, vamos aprender?

No Painel do Blogger clique no Nome do seu Blog - Design - Editar HTML e pesquise por ]]></b:skin> e quando achar, cole o código abaixo antes dele:

@-webkit-keyframes shake {0%, 100% {-webkit-transform: translatex(0);}10%, 30%, 50%, 70%, 90% {-webkit-transform: translatex(-3px);}20%, 40%, 60%, 80% {-webkit-transform: translatex(3px);}} /* Não mexa aqui */

.social img{

width:30px; /* largura dos icones */

}

.social{

border: 1px solid #FFFFFF; /* borda */

background: #B29886; /* Fundo */

box-shadow: inset 0 0 10px #989973; /* Sombra dentro do fundo, escolha uma cor mais escura */

margin: 1px; 

display: inline-block;

width:30px; /* largura dos ícones */

height: 30px;  /*altura dos ícones */

-webkit-transition: all .5s ease-out; 

-moz-transition: all .5s ease-out;

float:center;  

}

.social:hover {

-webkit-animation: shake 1.3s;-moz-animation: shake 1.3s;-ms-animation: shake 1.3s; /* Não mexa aqui */

background: #AFB08E; /* Fundo Hover */

box-shadow: inset 0 0 10px #989973; /* Sombra dentro do fundo hover, escolha uma cor mais escura */

-webkit-transition: all .5s ease-out; 

-moz-transition: all .5s ease-out;

}

Agora, troque para a ala Layout - Adicionar um Gadget - HTML/JavaScript e adicione dentro da caixinha o código abaixo:

<a href="LINKDAREDESOCIAL" title="NOME"><div class="social"><img src="URLDAIMAGEM" /></div></a>

Se quiser adicionar mais redes (o que na verdade deve ser feito), basta repetir o código abaixo, certo? Bom, eu deixei abaixo as imagens que eu coloquei na Live Preview, são todas feitas por mim ok? Porém, se quiserem usar outras, podem também! 

      

Espero que tenham gostado do Menu *O* Até a Próxima :)