Image Map

Criando o seu próprio menu ✬

em 27/03/2015 |

Hello Hello Baby! Tudo bem com vocês? Como eu fiquei praticamente a semana inteira sem postar, vou comentar algumas coisas que aconteceram durante essa semana. Primeiro, vocês viram que o Zayn Malik deixou a One Direction, eu sei que foi pro bem dele, mas eu acho que ele fez a escolha errada e daqui alguns meses ele vai perceber a burrada que fez, além disso tem as fãs que vão sentir muita falta dele, vocês acreditam que desde o dia 25/03 que ele anunciou a sua saída da banda uma das tags que as directioners subiram nesse dia estava nos trends mundiais do twitter até hoje meias cedo? Eu realmente desejo muita força aos fãs da banda nesse momento.

O segundo assunto é sobre a minha formatura do terceiro ano, sim nós já começamos a organizar as coisas, porque ano passado o terceiro deixou tudo para ultima hora e acabou que a formatura deles foi só na igreja, sem o jantar, sem festa e sem nada. Por isso decidimos começar cedo esse ano, eu estou realmente muito animada com isso. Mas isso vai tomar bastante tempo meu já que eu faço parte da comissão de formatura, hoje mesmo nós fizemos o modelo da camiseta que queremos para usar como uniforme para o nosso último ano no colégio, sabem aquelas camisetas de futebol americano? Então será tipo isso. E como os estudos e os preparativos da formatura eu estou com pouquissímo tempo para postar, então provavelmente não irei postar todos os dias como antes, mas farei o possível para postar pelo menos 3 vezes por semana ok? Mas agora vamos ao tutorial?


Então isso é um menu base para vocês mexerem e tentarem aprender a montar seu próprio menu, podem colocar sombras internas, externas, cores em gradiente, efeito hover com frames e por ai vai, mudem o que se pede no caso cores, altura, largura, bordas e não esqueçam de darem nome ao seu menu ok? Dê o mesmo nome do menu a div do link que irá dentro do gadget pois se não ele não irá funcionar certo?

É bem simples basta copiar o código e modificar, acho que todos sabem onde colar o código né? Caso alguém tenha duvidas és ó perguntar nos comentários
NOME DO MENU {
color:#COR DA FONTE;
text-shadow: 1px 1px 1px #COR DA SOMBRA DA FONTE;
background:#COR DO FUNDO DO MENU;border: solid 1px #COR DA BORDA;
box-shadow: inset 0 0 6px #COR DA SOMBRA, 0px 1px 1px #COR DA SOMBRA;
line-height:ALTURA DO TEXTOpx; margin:-MARGEMpx;
margin-left:MARGEM A ESQUERDApx;
display: inline-block;
padding-top: ALTURA DO MENUpx;
text-align: center;
font-family: PF Arma Five;
font-size: 8px;
float: center;
padding:LARGURA DOS LADOSpx;
height: ALTURA DO MENUpx;
width: TAMANHO DO MENUpx;
-webkit-transition-duration: .80s;
}
NOME DO MENU:hover {
cursor:hand;
background:#COR;border: solid 1px #COR;
box-shadow: inset 0 0 6px #COR DA SOMBRA, 0px 1px 1px #COR DA SOMBRA;
-webkit-transition-duration: .80s;text-align: center;
font-family: PF Arma Five; font-size: 8px; color:#COR DA FONTE EM HOVER;}
Em seguida crie um gadget e cole:
<a href="LINK AQUI"><NOME DO MENU>NOME DE ALGO AQUI</NOME DO MENU></a>

23 comentários:

  1. Me lembro de quando eu comecei a blogar, e procurei desesperadamente por um tutorial como esse, acabei improvisando com códigos de outros menus na época. Espero que ajude blogueiros iniciantes.

    http://www.gabbisandi.com/

    ResponderExcluir
  2. eu nunca consegui fazer um menu :cc
    mesmo vendo tutoriais. e até o seu ;-;
    jsdfisd eu sei apenas o mediano dessas parada de html.

    http://thesweetmomentts.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Eu também sei o mediano, mas mesmo assim sei fazer

      Excluir
  3. Gostei do tuto, me ajudou muito!
    Obrigada ♥
    Beijos!
    www.algunsr4biscos.blogspot.com

    ResponderExcluir
  4. tuto bem bonitinho,pode ensinar a fazer ilustrações?
    bjs

    ResponderExcluir
    Respostas
    1. Mas como você quer, tipo as minhas?
      Ai eu faço o tutorial ensinando

      Excluir
  5. Oi ^3^
    Vou bem sim, e você? Sim, eu vi :ccccc nossa, abalou geral, foram confirmados mais de 700 suicídios desde que ele saiu, e eu fiquei muito mal. Não era/sou directioner mas fiquei bastante sentida por acompanhar eles desde o xfactor e hoje ver a banda assim. Ele saiu dizendo que queria ser apenas um garoto de 22 anos normal, mas tipo, depois de participar por 5 anos da maior boyband do mundo, não dá pra exatamente largar tudo e viver uma vida normal.
    Essas coisas tem que planejar desde o início do ano mesmo, falo por experiência própria, quando terminei meu curso a gente deixou pra planejar a formatura de última hora e acabou saindo uma bosta, tivemos que fazer outra festa depois pra comemorar de verdade :B
    Eu acho que um menu é uma das coisas mais fáceis de fazer, a única coisa que basta é atenção. Esse tutorial ajuda demais os iniciantes que só tem uma base sobre html, adorei a postagem.

    Beijos, Henndrauhl

    ResponderExcluir
    Respostas
    1. Eu também sempre acompanhei eles, não da pra dizer que eu chorei, mas algumas lágrimas escorreram quando eu li a noticia.
      O foda é que ele disse que abandonou a banda porque queria ser um cara normal e no dia seguinte disse em uma entrevista que está gravando um album solo '-'
      Eu também acho muito fácil fazer menus.
      Que bom que gostou *-*

      Excluir
  6. Finalmente achei esse tutorial <3

    Sério, esse post me salvou auhsuahs não sou nenhuma mestre das HTML da vida, mas vou me aventurar, vai que... né?

    Kissus de menta ♥ ~ alcoolize.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Exatamente, se você não tentar nunca irá conseguir!

      Excluir
  7. Respostas
    1. Eu não sei muita coisa, mas também não sei pouca .. então sou mediana nisso

      Excluir
  8. Yoo, tudo sim e com você? Eu vi que ele saiu :c já fui muito fã deles, mas ultimamente nem tenho sido tanto, mas mesmo assim essa notícia me bugou. Sei que é pro bem dele, mas mesmo assim né, muito difícil isso.
    Sempre quis fazer uma festa de formatura e nunca fiz, do terceiro ano pelo menos eu espero conseguir fazer. E está certo, tem que começar cedo mesmo, se não depois acaba ficando tudo em cima da hora e não fica legal.
    Quis tanto achar um tutorial desses quando comecei a mexer com html, mds. Legal você postar pra ajudar os iniciantes ^^
    Gostei daqui *u*
    Kisses
    ptrasdeumsorriso.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Eu estou bem obrigada. Eu também já fui muito fã, até me atrevo a dizer que fui directioner, mas quando eles lançaram o segundo cd eu não gostei muito e fui abandonando aos poucos essa vida rsrs'
      Eu nunca quis fazer formatura nas outras séries tipo no oitavo ano, mas a do terceiro ano eu sempre soube que ia fazer. Na minha opinião não é formatura se você ainda vai voltar a estudar no colégio no ano seguinte.
      Eu também procurei essas coisas pra me ajudar e agora acho que eu vou me espelhar um pouco nisso pra fazer algumas postagens, tipo ver o que eu precisava quando comecei e postar para quem esta começando agora.
      Que bom que gostou, isso é importante para mim! ♥

      Excluir
  9. Sempre usei este tuto, sempre amei ele, tão fácil né? E o bom é que podemos fazer da nossa preferência. O tuto fico ótimo e bem explicado, xoxo.
    ~ Não sabia que a página do lay estava privada, já troquei.~
    ~Mini Realeza~ ≧ω≦

    ResponderExcluir
  10. Achei bem legal você compartilhar um código base :3
    Eu aprendi a fazer menu num tuto de um blog que fechou há muito, mas é mais simples quando ja se tem o código pronto ja :3
    Achei muito legal mesmo, quem compartilha aprende mais *-*
    beijooo
    http://umagarotanadaencantada.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. É bem mais fácil mesmo, se bem que eu fiz um menu sozinha uma vez só!

      Excluir
  11. EU AMEI ESSE TUTORIAL. Sempre quis saber e esse tutorial me esclareceu tudo, obrigada por postar >.<
    Beijos, Sakura.

    ResponderExcluir
  12. Imagina, a intenção é exatamente ajudar as pessoas!

    ResponderExcluir
  13. Olá flor tudo bem? Bem procurei algum meio de me comunicar com você que não fosse por aqui mas não achei, e odeio confrontos ou mal entendidos mas terá que ser por aqui mesmo, eu vim aqui comentar no seu blog e não pude deixar de notar que este tuto é na verdade o tuto do meu blog, como? Bem, eu olhei os códigos e são os meus códigos e até coisas que eu escrevi neste dia que fiz o tutorial você usou neste post, nada contra flor mas este post de criar o próprio menu eu fiz ele em 2013 e o seu você postou agora... Eu agradeceria muito se me creditasse ^^ Grata desde já ;)

    ResponderExcluir

Leia as regras:
✯ Todos os comentários são lidos e respondido previamente.
✯ Seu comentário precisa ter relação com o assunto do post.
✯ Não xingue ou desrespeite a dona e os outros comentaristas.
✯ Sugestões e críticas construtivas são bem vindas, ofensas não.
✯ Deixe o link do seu blog no final do comentário (sem o http://, para não ser considerado spam) e assim eu possa retribuir a visita ♥
Leu tudo?
Então comente!