Menu Cupcake

Olá, pessoal! Para o tutorial de hoje trouxe um menu vertical bem simples, com gradiente e efeito hover, espero que gostem.

Clique aqui para visualizar o menu

Primeiro vá no HTML do seu blog e acima de ]]></b:skin> cole:

.menucupcake {
background-image: linear-gradient(#COR_DE_CIMA, #COR_DE_BAIXO); /* Cores do gradiente */
width: 150px;
height: 20px;
text-align: right;
margin: 3px;
padding: 5px 7px;
border-radius: 10px; /* Tamanho do arredondamento das bordas */
border-right: 1px solid #COR_DA_BORDA;
-webkit-transition-duration: 0.30s;
}
.menucupcake:hover {
-webkit-transition-duration: 0.30s;
width: 139px;
height: 20px;
border-right: 12px solid #COR_DA_BORDA;
}
.menucupcake a {
color: #ffffff; /* Cor dos links do menu */
}

Salve e logo depois cole num gadget "HTML/JavaScript" isso:

<div class="menucupcake"><a href="LINK_DA_PAGINA">Nome da página</a></div>
<div class="menucupcake"><a href="LINK_DA_PAGINA">Nome da página</a></div>
<div class="menucupcake"><a href="LINK_DA_PAGINA">Nome da página</a></div>
<div class="menucupcake"><a href="LINK_DA_PAGINA">Nome da página</a></div>

É isso, abraços!