- Made By Lisa ☆: Menu Simple

2.12.16

Menu Simple

| |

Olá, pessoal <3

Quem aí já está de férias? Eu ainda não estou ;-; Não sei o motivo pelo qual minha escola resolveu prolongar tanto as aulas. Tenho vários amigos que já estão em casa, descansando, e eu desesperada estudando ¬¬

Enfim, estou muito ansiosa para ensinar o tutorial de hoje, já que é um menu criado por mim <3 Em meio ao desespero dos estudos, vim trabalhando também com HTML, criando e testando alguns efeitinhos >3< Este menu é o Simple, por ser bem simplesinho e eu estar sem criatividade, hahaha Fiz em dois modelos: o primeiro, pensando em links de páginas, e o segundo em duas colunas, pensando em links para tags.




Modelo 1

Vá no seu HTML, e, cole acima de ]]></b:skin>:

.menusimple {
color: #727272;
text-shadow: 1px 1px 1px #fff;
background: #f6cac9;
border-radius: 8px 0px 8px 0px;
margin-top: 4px;
margin-bottom: 4px;
padding: 2px 2px 2px 2px;
width: 250px;
height: 15px;
font-family: Verdana;
font-size: 10px;
text-decoration: bold;
text-transform: uppercase;
letter-spacing: 0px;
text-align: center;
float: center;
transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
}
.menusimple:hover {
color: #fff;
text-shadow: 1px 1px 1px #727272;
letter-spacing: 2px;
background:#91a7d0;
border-radius: 0px 8px 0px 8px;
}

Recomendo que altere a largura (em negrito) conforme o tamanho de sua sidebar.

Caso queira alterar as cores: em itálico, estão as cores do texto (normal e hover, respectivamente), e, em sublinhado, as cores do fundo (idem).

Em seguida, crie um gadget de HTML/Javascript e, nele, cole:

<center>
<a href="LINK"><div class="menusimple">TEXTO</div></a>
<a href="LINK"><div class="menusimple">TEXTO</div></a>
<a href="LINK"><div class="menusimple">TEXTO</div></a>
<a href="LINK"><div class="menusimple">TEXTO</div></a>
</center>

Modelo 2

Este é o modelo com duas colunas. Possui alguns códigos a mais, mas sua edição é praticamente mesma do anterior.

Vá no seu HTML, e, acima de ]]></b:skin>, cole:

.left { float:left; width:49%; text-align:justify; }
.right { float:right; width:49%; text-align:justify; }
.menusimple2 {
color:#727272;text-shadow: 1px 1px 1px #fff;
background:#f6cac9;border-radius: 8px 0px 8px 0px;
margin-top: 4px;
margin-bottom: 4px;
padding: 2px 2px 2px 2px;
width: 135px;height: 15px;
font-family: Verdana;
font-size: 10px;
text-decoration: bold;
text-transform: uppercase;
letter-spacing: 0px;
text-align: center;
float: center;
transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
}
.menusimple2:hover {
color:#fff;text-shadow: 1px 1px 1px #727272;
letter-spacing: 2px;
background:#91a7d0;border:solid 2px solid #728dbe;
border-radius: 0px 8px 0px 8px;
}

Mais uma vez, recomendo alterar a largura (em negrito). Em itálico estão as cores do texto, e em sublinhado, as cores do fundo.

Em seguida, em um gadget de HTML/Javascript, cole:

<div class="left">
<a href="LINK"><div class="menusimple2">TEXTO</div></a>
<a href="LINK"><div class="menusimple2">TEXTO</div></a>
<a href="LINK"><div class="menusimple2">TEXTO</div></a>
<a href="LINK"><div class="menusimple2">TEXTO</div></a>
</div>
<div class="right">
<a href="LINK"><div class="menusimple2">TEXTO</div></a>
<a href="LINK"><div class="menusimple2">TEXTO</div></a>
<a href="LINK"><div class="menusimple2">TEXTO</div></a>
<a href="LINK"><div class="menusimple2">TEXTO</div></a>
</div>

Os códigos após <div class="left"> se referem à coluna esquerda, enquanto os códigos após <div class="right"> se referem à coluna direita.


Espero que tenham gostado do tutorial <3 Em breve trarei mais, como o efeito turns, que já pode ser visualizado no blog de demonstrações.

~Abraços!

16 comentários:

  1. Ahhh que lindo <3 saudades de blogs assim como o seu, caí de paraquedas aqui no seu e fiquei muito encantada com esse layout que lembra bastante a blogosfera em 2013, sinto tantas saudades dessa época. Sucesso!

    ResponderExcluir
    Respostas
    1. Também sinto falta dessa época! hoje, visito os blogs antigos e fico triste de vê-los todos desativados :/ às vezes acho que eu deveria ter aproveitado mais esse tempo, saudades <3
      Muito obrigada >3<

      Excluir
  2. Eu não estou estudando esse ano, auehaue, mas pra minha irmã é a última semana de aula.
    Esse menu é bem lindo! O layout free que peguei tinha um código para as tags, mas eu não usei porque, sinceramente, quanto menos código tiver melhor, auehaue, detesto mexer no HTML :P

    ♡ { Barbie Pretty Sweet } ♡

    ResponderExcluir
    Respostas
    1. Boa sorte para ela, e também para você no ano que vem <3
      Obrigada~ Eu também odiava, sempre pegava todos os modelos prontos, hahaha só recentemente comecei a gostar de HTML :3

      Excluir
  3. AAAA, realmente é um menu lindo, já até usei ele algumas vezes quando tinha outro blog, o acabamento fica lindo ><


    Segue? Retribuo ><

    http://mundo-mikas.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada~ <3 mas esse eu criei recentemente .-.

      Excluir
    2. Sério? ¬¬
      Já usei alguns que eram parecidos ><
      Mais eram um poucos menores que esse ;*

      Excluir
  4. Oi Lisa, sou nova aqui! Vi seu blog e resolvi visita-lo! Que layout lindo. Gostei muito do layout das meninas do Red Velvet! Achei interessante. Eu já estou de férias. Calma, que logo logo as férias chegam! Uau você fez um menu? Que chique! Eu não consigo fazer menu, é uma sugestão: você podia fazer um post ensinando como criar coisas para blogs como menu! Acho que esse post (esse em que eu comento, do menu simple) irá ajudar muitas pessoas. Acho que vou usar esse menu simple alguma hora. Eu e minha irmã Yuka (Eu e minha irmã temos o blog juntas, somos irmãs gêmeas ela chama-se Yuka aqui na blogosfera), vamos usar esse menu algum momento penso. E claro iremos creditar. Vim aqui comentar, porque vi seu comment num blog que eu já conheço e pensei: "Ela tá usando a foto da Park Bom? Então deve ser k-popper." e vim ver o blog! Achei ele bem legal! Vou ver outros posts para ver se conheço mais. Sucessos!
    ┈━═☆Até
    O Snack Cheese é a queijolândia~ | Temos tintas e penteados! ✄ Venham, o Snack Cheese virou salão ♥ ฅ(^T^)

    ResponderExcluir
    Respostas
    1. Olá, bem vinda <3 Obrigada <3 Siim, se tudo der certo e eu não estiver de recuperação, já estou livre ><
      Haha, foi meu primeiro menu, ainda estou aprendendo >3< adorei a sugestão, vou fazer esse tutorial em breve! Awn, que bom que gostaram <3 e que legal vocês serem gêmeas e terem um blog, vou conferi-lo ^3^
      Que bom que gostou do blog, mais uma vez, bem vinda <3 Muito sucesso para vocês também o/

      Excluir
  5. Espero que entre de férias logo! Eu já estou desde o dia 30. Lindo o menu! Amei :D

    ~September Rains

    ResponderExcluir
    Respostas
    1. Entrei essa semana *chora de alegria*
      Obrigada~

      Excluir
  6. Olá, eu vou bem e você? Ano que vem é meu último ano no Colégio, então estou aproveitando bem as férias pois aposto que não vou ter uma segunda chance.
    Eu adorei o menu, percebi que você é ótima em html, então continue ensinando.
    m-onologo.blogspot.com

    ResponderExcluir
    Respostas
    1. Olá, tudo ótimo! Ano que vem também será meu último, e também estou pensando em estudar nas férias.
      Que bom que gostou! Obrigada <3

      Excluir
  7. Olá!
    Cai de paraquedas aqui :3
    ~ le eu brizando no urso aqui do lado ~
    Olha, eu n usaria um menu assim, por ser pequeno (sou espaçosa demais), mas gosto de ver as pessoas usando, pois são super fofinhos *u*
    Bjs

    domingo, 4 de dezembro de 2016
    13:01

    Skull Minds |Twitter |Tumblr | Snap: maisaindia

    ResponderExcluir
    Respostas
    1. Olá, bem vinda <3
      Já eu prefiro os menorzinhos discretos hahaha também acho fofinhos ^^

      Excluir

>> Leia o post antes de comentar;
>> Pedir sdv é deselegante, comente sobre a postagem e então deixe seu link no final do post;
>> Se quiser afiliação, peça por aqui mesmo. Mas peço que assuma o compromisso de me colocar em sua elite, atualizar o seu blog e acompanhar o meu;