Criando seu próprio menu ♥


Olá doces de natal como vão? Tudo belezinha? Bem vejamos estou com menos de 10 minutos para fazer este post então já devem saber que não irei enrolar muito, uma menina pediu na ask para eu ensinar a fazer o menu do cabeçalho mas parei e pensei porque postar o mesmo menu? Não é um menu diferente é tão simples e quase sem graça tipo não tem segredos, bem tive a idéia de por aqui um menu base para vocês mesmos criarem seu próprio menu, são códigos bem simples que poderão aumentar, mudar ou até mesmo emendar com algum outro efeito que vocês queiram, avisando que os códigos são meus e foram criados por aprendizado em um site de css e htm, site aqui -> Css/html

Então como eu estava escrevendo é 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 amores é só copiarem o menu e colarem dentro do html e modificarem aos seus gostos! Kissus cheirosos =3


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;}

E o link que vai dentro do gadget:

<a href="LINK AQUI"><NOME DO MENU>NOME DE ALGO AQUI</NOME DO MENU></a>
Querem ver os perfis de quem posta aqui? cliquem na imagem᠉
Continue

24 comentários:

  1. Muito útil o tutorial >u<

    h-worlds.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada espero que seja muito útil mesmo ^3^

      Excluir
  2. Eu já sabia como criar mas tá valendo pra quem não sabe né,amo muito seu blog,espero que continue crescendo sempre.

    Beijos de chocolate >3<
    XOXO I IAdolescente Kawaii

    ResponderExcluir
    Respostas
    1. Awwwww muito obrigada que bom que gostou fico muito feliz *0*

      Excluir
  3. Óia, nunca vejo você postar de tarde EUHEUH só a noite, q.
    Cara, eu lembro quando morria de dificuldade pra fazer menus, eu me compliquei pra achar, mas esse tutorial, se eu tivesse visto-o antes, teria me ajudado demaaais ♥ Gostei muito!

    Kisses!
    htmlandresources.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Pois eh né amor pena que a gente não se conhecia antes mas qualquer coisa que queira saber é só me perguntar ok?

      Excluir
  4. Awn obrigado *u* esse parece muito mais pra´tico que o meu método de fazer menus vlw msm.

    geekegirlie.blogspot.com

    ResponderExcluir
  5. O menu é lindo e esse tutorial com certeza é útil para pessoas novas nesse mundo. Parabéns :3

    etcforme.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada amore ♥ uhum acredito que será bem útil mesmo. ..

      Excluir
  6. Adorei o tutorial, vou tentar criar um, porque só sei criar efeito e olhe lá, rsrs...

    www.whatnae.com

    ResponderExcluir
    Respostas
    1. Tenta flor vai ver como é fácil e divertido criar menus >.<

      Excluir
  7. Ótimo tutorial, Roh >3333< Estou pensando em criar meu próprio menu, olha as ideias que cê tá colocando na minha cabeça haha Poste mais tutoriais, os seus são sempre muito bem explicados e legais <3 Ótimo post :3
    Wendy | Checkmate (checkm-ate.blogspot.com)

    ResponderExcluir
    Respostas
    1. Cria mesmo mesmo amore bem divertido >.<, e tipo é legal criar seu próprio material te motiva mais.. E muito obrigada flor ;)

      Excluir
  8. Muito bom o tutorial , sempre me ajudando com eles, Obrigado , e espetacular o Menu , Parabéns :3

    http://s-omethingaboutme.blogspot.com.br/

    ResponderExcluir
  9. Eu normalmente sempre faço meus menus, mas eles também são sempre simples demais, porque eu tenho preguiça de inventar algo novo. LOL Adorei o tutorial, vou começar a pegar uma base para os menus aqui (preguiçosa eu? imagina -q) e colocar os créditos, lógico. <3

    ResponderExcluir
    Respostas
    1. Ahh obrigada ^^ pode usar a vontade :3, tipo sou fã de menus assim por incrível que pareça acho que tudo fica mais harmonioso e tipo aquela fase louca na blogosfera que tudo que era chamativo e cheio de efeitos mirambolantes acabou neh? UAHSUAShuashuhsus ;)

      Excluir
  10. Adorei o tuto,
    Até deixei ele salvo aqui nos favoritos para quando eu mudar o
    meu layout novamente eu usar!
    Quando tiver um tempo dá uma passada no meu blog por favor! :D
    http://l1fear.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Ok amore que bom que gostou, salve mesmo pois é bem útil e sim quando eu tiver um tempinho eu passo lá sim ^^

      Excluir
  11. o resultado final fica muito bom ^^ bjos Roh adorei o blog e ja seguindo ^*

    louca-por-html.blogspot.com || kissu

    ResponderExcluir
  12. MEUDEOS, que blog perfeito.. favoritei -q sz'
    Adorei o tuto, geralmente tenho problema com menus, mas vc deixou de um geito bem fácil, qualquer dia eu tento e faço o mais lindjo do mundo -sqn hasuhhdshashuas'

    3bjos || barbiemundogirls.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada flor que bom que foi útil e deu certo ;)

      Excluir
  13. Adorei <3
    http://unconditionallykawaii.blogspot.com.br

    ResponderExcluir

Olá meus amores, os comentários devem ser direcionados somente ao blog e não a vida pessoal de ninguém! Qualquer dúvida peça pela Ask que responderei o mais rápido possível. Anônimo não adianta vir xingar pelos comentários que antes de mesmo de pensar em me ofender eles serão excluídos! Não gosto de tags, se quiser fazer fique a vontade mas não irei retribuir, não curto seguindo segue de volta =/ mas posso seguir se gostar realmente do blog, não julgo por layout ou por seguidores, avalio o blog e como disse se eu curtir é claro que sigo, afiliações? Peça nos comentários pois se pedir em outro lugar no caso páginas é bem provável que eu não veja! Então meus lindos espero que curtam cada cantinho do meu bloguinho e voltem sempre! kissus (*^3^)

Layout e codificação por Roh A.Ramos Os blogs que mais ajudaram com os tutoriais foram: CHIHDVCA Tecnologia do Blogger ♡ 2012 a 2017