A primeira coisa a fazer é salvar uma cópia do seu template, se algo der errado, você poderá reverter.
Vá até o HTML do seu blogger.
Para instalar um menu horizontal em seu Blogger, procure pelo código:
]]></b:skin>
Agora copie e cole este código abaixo, em cima (sobre) ele.
#navcontainer{ /* none needed */ }
ul#navlist
{
margin: 0;
padding: 0;
list-style-type: none;
white-space: nowrap;
}
ul#navlist li
{
float: left;
font-family: verdana, arial, sans-serif;
font-size: 9px;
font-weight: bold;
margin: 0;
padding: 5px 0 4px 0;
background-color: #808080;
border-top: 2px groove #cccccc;
border-bottom: 1px groove #ffffff;
}
#navlist a, #navlist a:link
{
margin: 0;
padding: 5px 9px 4px 9px;
color: #ffffff;
border-right: 2px groove #cccccc;
text-decoration: none;
}
ul#navlist li#active
{
color: #000000;
background-color: #cccccc;
}
#navlist a:hover
{
color: #ffffff;
background-color: #000000;
}
OBS: CÓDIGO NA COR VERMELHA ACIMA SÃO AS CORES DO MENU, TROQUE-AS SE QUISER.
Agora procure pelo seguinte código: <*div id='outer-wrapper'>
E cole este código abaixo, depois (abaixo) dele.
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="AQUI O ENDEREÇO DO SEU LINK" id="current">Item 1</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 2</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 3</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 4</a></li></ul></div>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 2</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 3</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 4</a></li></ul></div>
Postagem original de:
Templates e acessorios
0 comentários:
Postar um comentário