Instalando o menu horizontal no Blogger

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. Se não sabe onde fica, clique AQUI para aprender.

Leia tudo

Para instalar um menu horizontal em seu Blogger, copie o código abaixo e cole antes da tag (código)


]]></b:skin>


Clique para ampliar





#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;
}










Agora copie o código abaixo e cole depois da tag:





<div id='outer-wrapper'>








<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>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 5</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 6</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 7</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 8</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item 9</a></li>
<li><a href="AQUI O ENDEREÇO DO SEU LINK">Item10</a></li> </ul>
</div>








Se quer o menu abaixo da imagem do seu template cole depois de:

Para blogger de 2 colunas


<div id='content-wrapper'>

Para Blogger de 3 colunas

<div id='main-wrapper'>








Salve e depois faça as modificações como cores, inserir links salvando novamente