15 de out de 2012

Tutorial - Menu de Barrinhas


Hey Girls, hoje vou ensinar como fazer o menu de barrinhas :)



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="http://3.bp.blogspot.com/-YlSV4J21M24/T4QmRimCfrI/AAAAAAAADjM/scPg1rDyAAw/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.
E pronto, está feito seu menu, Beijinhos :)


3 comentários:

  1. Esse menu tá bombando!!!
    rs
    Beijos^^
    www.cotidianodeumabarbie.blogspot.com

    ResponderExcluir
  2. Seu blog merece um segue, perdeitos os tutoriais, adoreei!
    dicas-da-manu.blogspot.com
    Bjos Manu!

    ResponderExcluir