Menu de Barrinhas

Hooy pessoal, hoje vou ensinar a fazer um menu muito fofo olha :



Créditos : http://blog-sweetpoison.blogspot.com.br/

 Vá em design > Editar HTML > Tecle F3 e pesquise por :

]]></b:skin>

E acima de ]]></b:skin> cole :

.menu a { margin-right: 144px; background: #B3E1CF; /* Cor das caixinhas */ border-left: 6px double #458B74; /* Borda */ font-family: Palatino linotype; /* Fonte */ font-style: italic; /* Estilo da fonte */ text-transform:lowercase; /* Estilo da fonte - uppercase: maísculas e lowercase: minúsculas */ display: block; /* Exibir em bloco */ font-size: 10pt; /* Tamanho da fonte */ color: #fff; /* Cor do texto */ padding: 3px; /* Margem interna */ text-align: left; /* Alinhamente do texto */ margin-bottom: 1px; } .menu a:hover { border-left: 6px solid #458B74; /* Borda em hover */ }

Edite de acordo com o seu gosto e salve. Vá em design > Elementos da Página > Adicionar um gadget HTML/JavaScript e nele cole o seguinte código :

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdyL0t9OaSNoLbWquucOcCBYVvDoxmtZPdqdz5I-RcXopthtyIyeeXTkhO48DrsrdcusI62U_MpaW3NwJbTEaUDg8ruiQOPdxCQfiLaxlnWlZ5TqJ4qdxKmoIItifVJdtftnYpq-UVTO5q/s1600/menu.png" align="right" /> <div class="menu"> <a href="URL1">Link 1</a> <a href="URL 2">Link 2</a> <a href="URL 3">Link 3</a> <a href="URL 4">Link 4</a> <a href="URL 5">Link 5</a> <a href="URL 6">Link 6</a> <a href="URL 7">Link 7</a> </div>

Onde está URL é o link da página, e onde está Link é o nome da página.

Você tem que colocar os 7 links, senão a imagem vai ficar desalinhada.
Na parte negritada é o url da imagem.
Se quiser usar sua própria imagem no lugar da imagem do Sweet Poison, coloque uma de 138x174.
Beijos !!!