clique aqui


BLOGS QUE ADMIRO ACIMA E OUTROS LINKS ABAIXO

15/09/2012

Tutorial: Menu de barrinhas


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 proximo layout, então vamos lá. Quer dar ima olhadinha? Ve aqui!

Bem você já sabe né? Aquele blá blá blá todo. Vá ate seu HTML e procure por

]]></b:skin>

Achou? Agora em cima dessa tag cole o proximo codigo

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


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

<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