Olá ~3~
Tudo bem? Eu estava fazendo uns goodies, mas não sabia o que querem! Então trouxe um tutorial de menu simples com gif! Acho que fica muito bem em um menu, ou social, tipo ask, tumblr, we S2 it, Facebook, e etc!
Enfim, já usei e ele funciona, se algo der errado é o seu código ou coisa assim, porém acho ele super fácil, tirei um print para vocês verem!
Vamos Lá?
1. Vá até editar HTML e procure pela tag ]]></b:skin> e acima dela, cole:
@font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}.fantastic {display : block;font-size: 8px;font-family: handy;text-transform: uppercase;line-height: 16px;margin-top: 2px;border-bottom : 1px solid #ebeaea;border-right : 1px solid #f1f1f1;border-left : 1px solid #f1f1f1;text-indent : 5px;vertical-align : middle;background: no-repeat left #f3f3f3;padding-left : 6px;padding-bottom : 2px;}.fantastic:hover {display : block;background: url('http://media.tumblr.com/tumblr_m0ohnsdlwO1qfjy56.gif') no-repeat left #f9f9f9;}
NTodos os códigos já são bem conhecidos. Naquela url ali é o link do seu gif, sendo o ícone verde, pode mudar para um coração ou o que preferir! Os códigos de cores #f1f1f1 referem-se a borda e #f3f3f3 refere-se ao fundo. O resto vocês sabem sozinhos, mas não recomendo que mudem, assim está ótimo!
2. Em um gadget de HTML/JavaScript, cole o seguinte:
<div class="fantastic"> seu texto </div>
Salve e estará tudo nos conformes. Espero que tenha entendido e gostado do tutorial, dúvidas, comente ^.^
Créditos X
é simples assim mesmo ? é muito fofo
ResponderExcluiranotherwoldoficial.blogspot.com
É mesmo super fácil!
ExcluirDanny, coloca os créditos para o blog que você pegou, daqui a pouco o BC vai ser acusado de plágio por sua causa c:
ResponderExcluirColoca os créditos para esse blog:
http://theallofplace.blogspot.com.br/2012/12/tutorial-menu-simples-com-gif.html
Esse tutorial é do KW Thiago, por causa do menu do print...
Excluirmas é bem fofinho ^^
Desculpa, é verdade Ayla! É Do KW u.u
ExcluirNão é a primeira vez que issso acontece, mas tudo bem, ficou LIAMDO ;3
Excluir^-^ Obrigada!
ExcluirUm dia eu estava procurando esse tutu,mas agora eu achei que o que eu coloquei ficou mais bonitinho,acho que depois talvez coloque na página de tutoriais :D
ResponderExcluirAVISO PARA TODOS OS AFILIADOS:Completando um mês o Retardadas da Net faz um sorteio valendo 2 layouts e divulgação!Se quiserem participar é só visitar ok?;DD
Beijos,
Luísa-->Retardadasdanet.blogspot.com
Fica lindo!
ExcluirAssim pireeeeeeeei no teu blog,tutorias PFTOS.dmas tipo...pfto dms teu blog todo *0* kkkkk minha prima e potterhead quase desmaia quando viu o layout.kkkkkkkk Tá mto diwo aki..bjoooos já sigo :3
ResponderExcluirTem post novo lá no http://wonderlend.blogspot.com.br/ se quiser depois dá uma pasadinha :3
O Blog não é meu, e sim do Thiago, mas obrigada~
ExcluirEu curto bastante esse menu, um dia eu uso!
ResponderExcluirSou Viciada nele *o*
ExcluirOiiee, ameeei o tuto, mas pode ensinar a colocar link nesse menu? quero usar nos goodies! Se puder, responda o mais rápido possível? agradeço desde já!
ResponderExcluirhttp://princesa-crista.blogspot.com.br/