Sejam bem vindos meu ao bloguinho, ele foi criado com o intuito de ensinar a quem necessita de ajuda em html e css, temos diversos tutoriais e materiais. Fiquem bem a vontade e qualquer dúvida que tiverem entrem em contato comigo ou peçam pela ask. Beijinhos caramelados e inté mais ♡
Search here
All that you want is here, css and html
Welcome to garota no mundo html.
- efeito legenda nas imagens de posts
- backgrounds grandes em aquarela
- Avatar do autor no post footer
- Leia mais na mesma linha do header
- Efeito Dragqueen e efeito Swing
- Três modelos de menus agenda
- Usando temas de tumblr no blog
- Criando seu próprio modelo de data
O tema atual do layout é: the fall of leafs
A meta dos posts do blog é de: 300 posts
A meta de comentários do blog é de: 3500
O blog foi inaugurado no dia: 27/12/2012
os Seguidores do blog atualmente são: 865
A versão atual do layout está na: 41ª vers.
folhinhas que estão no blog online agora:
folhinhas que já passaram por aqui:

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>

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