Menu Barrinhas Vertical Hover [001]

Hello, como vão todos? Hoje venho trazer um menu horizontal com barrinhas. É um menu simples, mas com ele é possível criar outros modelos e acrescentar efeitos. Eu encontrei o menu no blog Sweet Poison , então aqui vai os devidos créditos. Então vamos ao tutorial? Veja abrevia do menu mais abaixo.

Quando pronto ficara assim:

1. Em seu HTML procure por, ]]></b:skin>:

Códigos

#barrinhaslaterais {
background: #D7D7D7; */Background normal /*
border-left: 4px solid #B6F9F4; */ Cor da barrinha lateral */
font-family: tahoma; */ Fonte do menu */
font-size: 14px; */ Tamanho da fonte */
text-align : left;
padding-bottom : 4px;
padding-left : 6px;
margin-bottom: 5px;
}
#barrinhaslaterais:hover {
background: #D7D7D7; */ Background hover */
border-left: 4px solid #FF0000; */ Cor da barrinha lateral hover */
font-family: tahoma; */ Fonte do menu hover */
font-size: 14px; */ Tamanho da fonte hover */
text-align : left;
padding-bottom : 4px;
padding-left : 6px;
margin-bottom: 5px;
}

2.Modifique da forma que você desejar, agora adicione um novo gadget de HTML/Javascript e cole isso dentro:

Códigos

<div id="barrinhaslaterais">
<a href="LINK 1" title="">Nome do link</a></div>
<div id="barrinhaslaterais">
<a href="LINK 2" title="">Nome do link</a> </div>
<div id="barrinhaslaterais">
<a href="LINK 3" title="">Nome do link</a> </div>
<div id="barrinhaslaterais">
<a href="LINK 4" title="">Nome do link</a> </div>

Modifique as partes em negrito e prontinho!