Fazendo seu próprio menu

Post programado 

Good Afternoon ♥
Iae amores, como vão vocês? Tudo beleza? kk Comigo está tudo bem.Mas tem uma coisa que está me deixando com raiva aff, não sei porque, mas quando vou seguir novos blogs eu não consigo, não estou conseguindo seguir nenhum blog, aposto que isso é só comigo né? Aff, espero que isso se resolva logo.Outra coisa, é que parece que os meus seguidores sumiram '-', o que está acontecendo com vocês? Espero que voltem logo, estou me sentindo abandonada.Sei também que estou precisando visitar novos blogs(faz um tempo que não faço isso), mas em breve vou fazer umas visitinhas :D.
Esquecendo um pouco meus problemas e falando sobre o post, trouxe um tutorial que a maioria de você já devem conhecer, mas como existem pessoas meio que novatas no mundo do html, esse tuturial irá ajudar e muito.Hoje vocês irão aprender como criar seu próprio menu, é super fácil, vocês irão gostar. 


1.Para começar, você tem que criar um nome para o seu menu (nem sempre é necessário, mas é sempre bom).

2.Agora vamos começar a usar os códigos para o menu.No início do código do menu você terá que colocar assim:
#nomedomenu { 
 Após feito, vamos para a seguinte etapa.

3.Nessa etapa vamos usar os códigos como: background, bordas, largura, altura, tipo de fonte, tamanho de fonte entre outros.Abaixo do código anterior, você vai fazer como no exemplo:

#menukawaiisimples {
background: #ADD8E6;
 color: #FFF;
font-family: Arial; 
font-size: 10px;
text-aling: center; 
border-radius: 1px;
padding: 2px;
outline-style: solid;
outline-width: 1px;
outline-color: #7CC1D8;
width: 28%; 
height: 21%;
-webkit-transition-duration: .80s;

4.Vamos para a parte hover do menu:

Antes de começar o código hover, coloque antes dele:
 #nomedomenu:hover { 
 Agora faça como no exemplo abaixo:

#menukawaiisimples:hover { 
background: #FFC0CB;
color: #FFF;
 border: #FFB0BE;
outline-color: #FF9DAE;  
 -webkit-transition-duration: .80s;

5.Entendendo o código:

background = cor do fundo do menu
 color = cor da fonte
font-family = tipo de fonte  
font-size = tamanho da fonte 
text-aling = posição do texto
 padding = espaçamento do menu
margin = margem de espaçamento do menu
outline-style = tipo de borda
 outline-width = espressura da borda
 outline-color = cor da borda
 width = altura do menu
 height = largura do menu
 -webkit-transition-duration = tempo da mudança de cores 


 6.Juntando os dois códigos ficará assim:

 #menukawaiisimples {
background: #ADD8E6;
 color: #FFF;
font-family: Arial; 
font-size: 10px;
text-aling: center; 
border-radius: 1px;
padding: 2px;
outline-style: solid;
outline-width: 1px;
outline-color: #7CC1D8;
width: 28%; 
height: 21%;
-webkit-transition-duration: .80s;
#menukawaiisimples:hover { 
background: #FFC0CB;
color: #FFF;
 border: #FFB0BE;
outline-color: #FF9DAE;  
 -webkit-transition-duration: .80s;
}  

7.Agora vamos para a parte dos links.Adicione um gadget HTML/JavaScript e cole o código abaixo:
<a href="Link" id="nomedomenu">Nome</a> 
No lugar de nomedomenu você coloca o nome do seu menu. 

O meu menu ficou assim:

Bom, agora com o seu menu, é só você usar a sua criatividade e criar um menu do seu gosto.

4 comentários:

  1. Ameiii o tuto eu vou tentar fazer obrigada por ensinar adoreii.
    Adorei seu blog é muito interessante,Já estou seguindo se não for incomodo poderia retribuir? Ajuda eu atingir minha meta e aceita afiliação? Beijos ♥ cherrykawaii-14.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigada, que bom que eu ajudei.Claro, logo logo irei retribuir.E claro que aceito afiliação, depois a colocarei nos afiliados ok?

      Kiss!

      Excluir
  2. Poderia fazer um tutorial ensinando a deixar os comentários que nem o seu? ><

    ResponderExcluir
    Respostas
    1. Posso sim, mas o modelo dos comentários não é meu, é de outro blog.Mas posso fazer o tuto creditando-o. :)

      Excluir

-Não aceito palavrões.
-Não faça ofensas ao blog, só aceito critícas caso elas forem construtivas ao blog.
-Não comente apenas com um "seguindo, segue de volta?".
-Faça um comentário sobre a postagem lida.
-Deixe o link do blog no fim do comentário, assim poderei retribuir o carinho.