14/07/2013

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.


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 :)

24 comentários:

  1. Ensina a colocar frases nas imagens... n gostei a chei muito marrom... mais otimo para gente q gosta de marrom *---*

    ResponderExcluir
  2. Nossa que efeito massa!* adoro seus tuto♥
    http://fabiolucas92.blogspot.com.br/

    ResponderExcluir
  3. ahh, sim pensei que o fundo ja tava na imagem ja uahsuahuahsuahsuhaus, desculpa...

    ResponderExcluir
  4. Awn que lindo o menu, super fofo e da um toque especial para seus ícones :3 Beijos
    Trufa de Menta *-*

    ResponderExcluir
  5. Que lindo *0*
    As imagens lindas também u________u

    - Modern HTML

    ResponderExcluir
  6. Efeito lindo! ♥

    #Dark_Paradise.

    ResponderExcluir
  7. Gostei do tutorial vou usar o tuto no meu layout que vem.

    ResponderExcluir
  8. Muito bonitão esse menu *-*

    XOXO :D
    jovenclube.blogspot.com.br

    ResponderExcluir
  9. Sempre quis saber esse menu <33 awn valeeu , talvez eu use ><
    Chu ~ :3

    Vagas para Afiliados

    ResponderExcluir
  10. Que lindos! Amei amei amei! Tá de parabéns, ficaram lindos *0*





    Retribui? ^-^ hatsune-kawaii.blogspot.com

    ResponderExcluir
  11. Oxê, eu venho aqui de boas ver esse tuto e aí me deparo com essa perfeição de layout o_Ó Assim, 'cê empresta esse talento ft.originalidade? /parei

    Que tutorial mais bonitinho. vou usar quando o blog for mais conhecio pro povo vir falar comigo, pq até agora né, ninguém sabe direito quem eu sou u_u

    *apaixonada pelas borboletas do back, apenas*
    — Rosa de Masyaf ☆

    ResponderExcluir
  12. Que lindo esse manu, eu ainda não conhecia-o, gostei.
    alternativeyeah.blogspot.com
    Beijo.

    ResponderExcluir
  13. Que bonitinho *-* Ele ficou com um efeito legal, parece que foi desenhado, sei lá kkkkk' adorei *-*

    ResponderExcluir
  14. Awn, são fofos! Amei!! <3

    O BDF pode melhorar? Como? Mande a sua opinião
    Batom de Framboesa

    ResponderExcluir
  15. O resultado é realmente lindo *u* e o seu layout é divo,amei.
    http://catchingfeelings-love.blogspot.com.br/

    ResponderExcluir
  16. Com certeza vou usar no meu próximo lay !!
    Beijinho : palacefame.blogspot.com.br

    ResponderExcluir
  17. Lindooo *3* Eu irei usar com certeza ><
    # www.cute-bii.blogspot.com

    ResponderExcluir
  18. Oi,idequei seu blog numa tag!
    Vai lá!Estou esperando!

    http://sweet-girl-oficial-debora.blogspot.com.br/

    ResponderExcluir
  19. Muito bonitinho! Vou colocar no meu blog! :))

    ResponderExcluir