23/06/2013

MDT #1: Menu para Redes Sociais + Resultado da Enquete

"Se tivéssemos como voltar atrás, nunca iríamos seguir em frente." - Demi Lovato.
Hey pessoal, como passam o FDS? Espero que bem! Ontem eu não pude postar porque viajei pra uma cidade aqui do interior da Paraíba e passei o dia por lá. Mas hoje estou aqui para trazer o Resultado da Enquete feita na postagem anterior.
Bom, acho que quem viu a postagem temporária de ontem e visitou o blog hoje mais cedo, percebeu que a opção vencedora foi a do Layout Free (o qual eu já comecei a trabalhar e adianto, está ficando DIGNO), porém, como eu sou um Blogueiro mal, resolvi trazer também a Maratona de Tutoriais Exclusivos, já que essa foi a segunda opção mais votada, a começar hoje por um Menu para Redes Sociais. Antes de aprendê-lo, vejam a Previa do menu abaixo:


Gostou? É o mesmo que eu uso atualmente aqui no Blog. Vamos aprender?
Não tem nada de difícil, certo? Vamos começar com o código que vai dá o efeito no menu, não precisa mudar quase nada, apenas a margem que eu indiquei no código porque isso varia dependendo do tamanho da sua sidebar. No Painel do Blog, clique no nome do seu Blog - Modelo - Editar HTML e pesquise por ]]></b:skin> 
Agora cole o código abaixo, antes do que você acabou de encontrar: (modificando o que deixei em itálico)

.redesocial {
width:250px;
top:-2px;
left:5px;
position:center;
z-index: 100;
}
.menusocial img {
width:18px;
}
.menusocial {
background:rgba(255,255,255,0.4);
line-height:16px;
height:18px;
margin: 3px 5px 3px 11px;
display: inline-block;
width:18px;
padding:4px;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
float:center;
position: relative;
}
.menusocial:hover {
border-radius: 20px;
transform: rotate(720deg) scale(1) skew(0deg);
-moz-transform: rotate(720deg) scale(1) skew(0deg);
-webkit-transform: rotate(720deg) scale(1) skew(0deg);
-o-transform: rotate(720deg) scale(1) skew(0deg);
background:rgba(40,40,40,0.4);
}
Bom, agora vamos aplicar o código do menu, com os ícones sabe? Mude para a Ala Layout - Adicionar um Gadget - HTML/JavaScript e cole o código abaixo dentro da caixinha do Gadget:
<center><div class="redesocial"><a href="LINKDAREDESOCIAL" title="NOMEDAREDESOCIAL"><div class="menusocial"><img src="URLDOICONE" /></div></a></div>
Para acrescentar mais redes sociais, você só precisa repetir o código colocando o </div> apenas depois do último, entendeu? Bom, os ícones que eu uso são todos deste site AQUI. Basta pesquisar pelo nome do ícone e vão aparecer várias imagens, você só precisa copiar um URL do que escolheu e substituir no código.
Bom, espero que tenham entendido e gostado do Menu. Qualquer dúvida é só perguntar na Ask, ok?  Se quiserem algum tutorial específico peçam pela Ask também AQUIBeijos :*

43 comentários:

  1. Adoreeeeeeeeeei *O*
    pequeena-princesa.blogspot.com.br/

    ResponderExcluir
  2. ♥ Que lindo ♥ Amei o menu ♥

    #Dark_Paradise.

    ResponderExcluir
  3. Adorei esse menu, vou usar no meu próximo layout, me apaixonei por ele u.u

    Kissus!
    http://criticas-on.blogspot.com.br/

    ResponderExcluir
  4. O menu é lindo, super prático e veio em boa hora! Estou fazendo um novo layout para o blog e prevejo que a Maratona de Tutoriais seja muito útil haha
    Posso te fazer um pedido por aqui? Gostaria de saber como por a legenda nas fotos pelo html : )

    Beijos ♡
    World Cutest | Twitter pessoal

    ResponderExcluir
    Respostas
    1. Já haviam me pedido esse tutorial e eu disse que iria esperar um pouco, aproveitar enquanto o código é novo, sabe? Mas acho que eu posso postar nessa Maratona sim :P

      Excluir
  5. Amei o menu! Talvez use no meu próximo layout :) Seguindo aqui ^^ Beijoooos,

    http://goods-sweets.blogspot.com.br/

    ResponderExcluir
  6. Onde clico pra seguir? SAHSAUSHAU, não achei aqui :p

    ResponderExcluir
  7. Aaaeww adorei esse menu acho que vou usar, mas só no próximo lay, porque acabei de trocar meu lay ^^

    vaonamala0ficial.blogspot.com

    ResponderExcluir
    Respostas
    1. Ok, vai ficar muito bom, tenho certeza *O*

      Excluir
  8. Que legal, talvez eu use. u_u Mas ainda vai demorar pra eu trocar de layout. HEUHUHEUHEU ~queissosejaumapromessa.
    É... Eu não vi o resultado da enquete. e,e Talvez eu não tenha percebido, mas OK.

    XOXO, Josh.

    ResponderExcluir
    Respostas
    1. Ta na postagem anterior, tem data pra término ai decidi não tirar print KKKK Obrigado :)

      Excluir
  9. Que lindo, salvei nos meus favoritos em breve usarei.
    Xoxooh~
    Daily-whin.blogspot.com

    ResponderExcluir
  10. Muito perfeito esse menu :3 adorei ele ^^
    Esperando por esse lay free que está ficando DIGNO u_u

    XOXO :D
    jovenclube.blogspot.com.br

    ResponderExcluir
  11. Queria tanto saber criar essas coisinhas no HTML mas enquanto isso conto com a ajuda de blogs como esse pra conseguir fazer o layout do meu. ;b
    Estou feliz que tenha resolvido fazer essa maratona de tutorias mesmo não ganhando a enquete porque foi exatamente no que eu votei! :)

    sempre-divando.blogspot.com

    ResponderExcluir
    Respostas
    1. HAHA, Estou feliz também por saber que gostou :)

      Excluir
  12. Que legal esse menu *-*
    cr4zy-world.blogspot.com

    ResponderExcluir
  13. Ai que lindo,Vou usar...Eu estou tentando fazer meu primeiro lay.Espero que dê certo!

    Formula-amor.blogspot.com

    ResponderExcluir
  14. Que menu lindo! Adorei, de verdade! Eu comecei a colocar as minhas redes sociais no blog neste template, e todo mundo está usando, né? Acho super legal encontrar várias formas de falar com o blogueiro sem ser no blog em si ^^
    Beijos~

    www.black-cherry.net

    ResponderExcluir
    Respostas
    1. Eu pelo menos uso desde o primeiro Layout do Blog, acho super importante temos outros meios de contato! Beijo :*

      Excluir
  15. Ficou muito fofo o menu, amei o efeito giratório dele! *0*

    Kisses <3
    Meu jardim Secreto (ou clique no perfil)

    ResponderExcluir
  16. Esse menu é muito fofo. Eu adorei... Foi de proposito? Sabe? Ele sumir ali na sidebar. Ou foi sem querer querendo que isso ocorreu? AHUHSAS'

    E desculpa a ausência, mas custo a lembrar que os afiliados existem rsrsrs'

    Six Seconds

    ResponderExcluir
    Respostas
    1. Aqui ele nem desaparecem, KKKKKK Apenas ficam mais escuros. Acho que pode ter algo a ver com a configuração do PC, tipo brilho, essas coisas sabe? Ah, acontece :P Obrigado!

      Excluir
  17. Eu também só coloquei menu de redes sociais no layout atual do meu blog e acho muito legal ter outras maneiras de falar com o blogueiro! :3
    No próximo layout, usarei esse! ^^
    Bjo, Sel ;*

    Jovens Gordinhas

    ResponderExcluir
  18. ameeeeeeeeeeeeei o menu , liindo liindo!

    Veja>>http://euamotutoriais.blogspot.com.br/

    ResponderExcluir
  19. Que tutorial perfeito! *-* Adicionei esse efeito ao novo layout que estou fazendo pra meu blog :3'

    ResponderExcluir
  20. não entendi nada '-' mano tem que ter uma paciência pra fazer esses bagulhos ç.ç até agr to procurando meu '']]>''

    ResponderExcluir
    Respostas
    1. Oi, ér, eu tirei um print do meu pra te amostrar como se acha rs espero que te ajude @-G. Primeiro você clica em ''Formatar modelo'' ai você vai ver abreviado assim *http://i.imgur.com/4j2iilP.png* ai você da um clique nesse trecho ai vai expandir o código, ai você desce o mouse um pouquinho e logo vai ver esse trecho http://i.imgur.com/oySP3iC.png <--- ai é só você colar o código do menu das redes sociais encima da parte ]]>
      Resultado final: http://i.imgur.com/nRZwJ3z.png
      Espero que tenha ajudado ^^

      Excluir
  21. Caaaaaara eu amei esse menu! De verdade! Até coloquei ele no meu blog!
    Se vc puder visitá-lo eu ficaria muito feliz, de verdade mesmo.
    umagarotanadaencantada.blogspot.com
    Brigada pelo tutorial! Amei seu blog! Vou seguir e vasculha-lho todo! kkk
    Beeeijos!

    ResponderExcluir
  22. Não consegui colocar de jeito maneira os ícones a imagem não aparece!

    ResponderExcluir
  23. Oi, o meu menu ficou com os icones um embaixo do outro em vez de ficar todos na mesma linha. Como faço pra mexer nisso?

    ResponderExcluir