2 Modelos de Menu Simples

Bom Dia!!! hoje temos o primeiro tutorial do blog, ele é bem simples/básico são dois modelos de menu simples que eu crie faz muito tempo para o meu antigo blog de tutoriais que hoje é um blog literário. Os primeiros tutoriais aqui do blog serão na maioria repostagens de códigos que eu crie, mas em breve teremos postagens fresquinhas <3

Os dois modelos de menu por serem simples podem ser personalizados para a cor que vocês desejarem e é super fácil de aplica-los no blog, você não precisa saber quase nada de HTML. Confira os Preview do primeiro menu clicando aqui e do segundo clicando aqui. Espero que gostem do primeiro tutorial do blog e que curtam sua estrutura bem simples.

Vamos ao Tutorial:

1° Passo: Vá em Modelo > Editar HTML.

2° Passo: Procure por(Usando Ctrl+F): ]]></b:skin>

3° Passo: Escolha o modelo do menu que deseja(1 ou 2).

4° Passo: Cole acima de "]]></b:skin>" o código referente ao menu escolhido.

          Código do Menu 1

/*-----Início do Menu Simples por meumundo-meuestilo.blogspot.com.br-----*/
a.menusimples{
background-color: #CDB7B5; /*-----Cor do Fundo-----*/
padding-bottom: 10px;
padding: 10px;
text-align: center;
margin:3px;
color:#fff;
font-size: 12px;
}
a.menusimples:hover{
background-color: #FFE4E1; /*-----Cor do Fundo Houver-----*/
-webkit-transition-duration: .80s;  
}
/*-----FIM do Menu Simples por meumundo-meuestilo.blogspot.com.br-----*/

          Código do Menu 2

/*-----Início do Menu Simples 2 por meumundo-meuestilo.blogspot.com.br-----*/
a.menusimples{
background-color: #CDB7B5; /*-----Cor do Fundo-----*/
padding-bottom: 10px;
padding: 10px;  
border-radius:2px;
width:100px;
text-align: center;
margin:3px;
color:#fff;
font-size: 12px;
}
a.menusimples:hover{
border-radius:15px;
background-color: #FFE4E1; /*-----Cor do Fundo Houver-----*/
-webkit-transition-duration: .80s;  
}
/*-----FIM do Menu Simples 2 por meumundo-meuestilo.blogspot.com.br-----*/

5° Passo: Edite o código conforme seu gosto e preferencia.

6° Passo: Cole em um Gadget Java/Script o seguinte código:

<a class="menusimples" href="http://www.blogger.com/Link" target="_blank">Nome </a>
<a class="menusimples" href="http://www.blogger.com/Link" target="_blank">Nome </a>
<a class="menusimples" href="http://www.blogger.com/Link" target="_blank">Nome </a>
<a class="menusimples" href="http://www.blogger.com/Link" target="_blank">Nome </a>
<a class="menusimples" href="http://www.blogger.com/Link" target="_blank">Nome </a>
<a class="menusimples" href="http://www.blogger.com/Link" target="_blank">Nome </a>

7° Passo: Altere o codigo colocando o link e o nome do link.

Pronto!!! Espero que tenham gostado do tutorial <3