Menu vertical costumizável
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>
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>
Assine o feed deste blog ou receba todos os artigos
por email. |
Seja o primeiro a comentar ;)
Postar um comentário