Menu Gradiente com efeito hover

Yo meus meu coelhinhos trago mais um menu para vocês hoje, um menu no estilo hover gradiente. Ele e mais simples mas da muito charminho para o seu layout. Ele não modifica o menu padrão do blog ele é dentro de um gadget   HTML/Javascript. Então quer tentar?  Mas abaixo esta o exemplo.

Quando pronto ele ficara assim, eu coloquei ele acima das postagens, onde colocar e opção sua.

Primeiro você ira precisar de duas imagens em gradiente ou normais como desejar, eu usei essas duas você pode usar se quiser também.

1. Agora vá para seu HTML e procure por ]]></b:skin>, e acima dessa tag você coloca

Códigos

.menugradiente {

background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSSyK3-tai7syCT4eWBqmC4ZH1ZzttzyRHGI-LoEvruQrQ6ySPS50balvpg79WroT-UCRINzMgaQdtqbsASSoZNdIlWzqOjBRDcbkoeZP69mHrwPiyCmRV0UNZT8K3FCjFi9yfS62NANfH/s1600/24.png');

display: inline-block;

text-align: center;

font-size:14px;

color: #ffffff;

text-shadow: 0 1px 3px #b2b2b2;

float: center;

margin: 2px;

font-family: verdana;

padding: 6px;

width: 100px;

height: auto;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

-webkit-transition-duration: .50s;

}

.menugradiente:hover {

background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_3M6ya3sgBJ34BTqlP_4wVvpzMdHLJTyI1N3dlsH2gm6pRKj8D31luj-S5nI4IJdOdhZEKiS7WD9p0_AQModBtKUgVfymXVU_G07HiLxMcEe5-5_c9BmDGfJ9gwGcN78sKsJjI1CSkEaW/s1600/23.png');

text-shadow: 0 1px 4px #737070;

-webkit-transition-duration: .60s;

}

2. Agora vá para seu layout e abra um gadget HTML/Javascript. Abriu? Agora dentro dele coloque esse código 

Códigos

<a href="URL" alt="­" ><div class="menugradiente">NOME</div></a>

<a href="URL" alt="­" ><div class="menugradiente">NOME</div></a>

<a href="URL" alt="­" ><div class="menugradiente">NOME</div></a>

◤Entendendo o código◥

• background: url('Sua imagem'); - No lugar de "Sua imagem" coloque a imagem que desejar.

• display: inline-block; - Mude inline por outline se quiser mudar o menu para um abaixo do outro.

• text-align: center; - É o alinhamento do texto. Mude para right (direita) ou left (esquerda).

• font-size:14px; - Tamanho da fonte. Quanto maior o número, maior ela fica e vice-versa.

• color: #ffffff; - Cor da fonte.

• text-shadow: 0 1px 3px #b2b2b2; - Cor da sombra.

• float: center; - Alinhamento do menu. Mude para right (direita) ou left (esquerda).

• margin: 2px; - Espaço entre cada quadradinho do menu. Quanto maior o número, maior o espaço.

• font-family: verdana; - Tipo da fonte. 

• width: 100px; - Largura do quadradinho.

• padding: 6px; - Espaço entre as letras e o fim do quadradinho. Quanto maior o número, maior o espaço.