quarta-feira, 25 de julho de 2012

Menu de barrinhas




Heey my lovers, como estão? Hoje vou ensinar vocês à fazerem esse menu no seu blog:


Vá em Design > Editar HTML > Ctrl + F e procure por ]]></b:skin> > Cole acima disso esse código:

.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 */
}

Salve e vá para Layout > Adicione um Gadget HTML/Javascript e nele coloque esse código:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-DezLlLl6IZyCaD28Y2Ad4lrzPyfVpucvvtZIsAX1LBtXlae80h3o8AATKiEyD2QLpP3kBgtZ67dwVXkgYLfsXfjZgc-bOf70TAR7yh-Qz0-Msz5nBzBRV7xYDzn5NNWacaVf4mMBPIYa/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á escrito URL você colocar a url da página e em Link coloca o Nome da página. Prontinho, agora é só ver se tá tudo certo, e salvar.

Nenhum comentário:

Postar um comentário