15/09/2012

Menu Barrinhas Vertical Com Imagem [005]


Yo meus amados visitantes! Trago mais um menuzinho kawai para vocês!!! Menu de barrinhas aquele de ladinho que eu acho muito simpley mas e muito fofo. Eu nunca o usei mas pretendo usar no meu próximo layout, então vamos lá. Quer dar ima olhadinha antes? Basta clicar no botão mais abaixo e ver o resultado. 


1. Bem você já sabe né? Vamos até tema, e depois vá ate o HTML e procure por:

]]></b:skin>

2. Achou? Agora em cima dessa tag cole o próximo código:

Códigos
.menu a {
margin-right: 144px;
background: #FDE0E0; /* Cor da caixinha */
border-left: 6px double #E50000; /* 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: #FF0000; /* Cor do texto */
padding: 3px; /* Margem interna */
text-align: left; /* Alinhamente do texto */
margin-bottom: 1px;
}
.menu a:hover {
border-left: 6px solid #E50000; /* Borda em hover */
}


3. Agora vai lá em seu layout o corpo do seu blog e adicione um gadget de HTML/Javascript, dentro dele coloque esse código. 

Códigos
<img src="http://1.bp.blogspot.com/-08EwezqxEjA/UFUpPsgnhKI/AAAAAAAAZ7s/_adD7o2wSj4/s1600/222.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>

Eu usei uma imagem no tamanho de 132x173 pxls

2 comentários:

  1. Tchi... bem triste não dar pra por este menu com cabeçalho eliminado... :c
    Pq sempre que coloco o HTML do menu, o cabeçalho aparece.. ;-;

    ResponderExcluir
    Respostas
    1. Estranho eu já usei sem o cabeçalho...

      Excluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345