27 de dez de 2007

Menu vertical costumizável

Com este tipo de menu, você poderá colocar o tipo de botão de sua preferencia, fazer efeitos diferentes, bem facinho. Você precisará de um modelo de botão, ou até dois caso queira fazer efeito em seu menu.


Vá até o HTML do seu blog e procure pelo seguinte código:

]]></b:skin>


Cole acima dele o código abaixo:




{
list-style:none;
margin:0px;
padding:0px;
}#menu {
width: 200px;
border-style: solid solid none solid;
border-color: #94AA74;
border-width: 1px;
}
#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu li a:link, #menu li a:visited {
color: #FFFFFF;
display: block;
background: url('http://img341.imageshack.us/img341/4782/image1lu2.jpg');
background-repeat:no-repeat;
padding: 8px 0 0 50px;
}
#menu li a:hover {
color: #cccccc;
background: url('http://img205.imageshack.us/img205/4131/12uw2.jpg');
background-repeat:no-repeat;
padding: 8px 0 0 50px;
}
#menu li a:active {
color: #666666;
padding: 8px 0 0 50px;
}



*ATENÇÃO: o selecionado na cor verde representa o botão, caso não goste, troque por outro de sua escolha, não retire as aspas, ok ?
O selecionado na cor azul são as cores das letras que aparecerão no botão, caso precise, mude-os para a cor desejada

depois em "Elementos de página", clique em "Adicionar . Ao abrir a tabela clique em HTML/Javascript, e cole o código abaixo, depois acrescente os links que quiser nos locais indicados. ( em cor verde é o endereço do que vai linkar e em verde, é o que vc irá esscrever que aparecerá escrito no botão)


<div id='menu'>
<ul>
<li><a href='ENDEREÇO DO LINK'>LINK 1</a></li>
<li><a href='ENDEREÇO DO LINK'>LINK 2</a></li>
<li><a href='ENDEREÇO DO LINK'>LINK 3</a></li>
<li><a href='ENDEREÇO DO LINK'>LINK 4</a></li>
<li><a href='ENDEREÇO DO LINK'>LINK 5</a></li>
<li><a href='ENDEREÇO DO LINK'>LINK 6</a></li>
<li><a href='ENDEREÇO DO LINK'>LINK 7</a></li>
<li><a href='ENDEREÇO DO LINK'>LINK 8</a></li>
</ul>
</div>


Para acrescentar mais links, é só ir acrescentando,

<li><a href="ENDEREÇO DO LINK">ESCREVA AQUI O QUE QUISER QUE APAREÇA NO BOTÃO</a></li>


antes de

</ul>
</div>

Clique AQUI e escolha seu buttom

6 comentários:

  1. É MUITO BOM MAIS UM PLOBEMA. DECHHA,


    FICOU BOM

    ResponderExcluir
  2. Olá. Ao pesquisar sobre menus verticais acabei encontrando seu blog. Fiz tudo exatamente como esta escrito no post (inclusive refiz o processo 3 vezes), mas o o que acontece é que, aonde deveria ficar o menu com os botões, aparecem apenas os textos (o botão que deveria estar por trás do texto não aparece). No fim fica um menu normal, só que sem botões.

    Teria como alguém me dar um help? :x
    Desde já, obrigado!

    ResponderExcluir
  3. seu blog tem olayout horrivel, muito poluido

    ResponderExcluir
  4. como eu coloco esse menu ali do lado do blog?

    ResponderExcluir
  5. Fiz tudo exatamente como esta escrito no post, mas o o que acontece é que, aonde deveria ficar o menu com os botões, aparecem apenas os textos (o botão que deveria estar por trás do texto não aparece). No fim fica um menu normal, só que sem botões.

    me ajuda!

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube