Instalar menu horizontal no novo Blogger

Com um menu você poderá organizar suas redes sociais, por exemplo

No painel de entrada do Blogger, clique no ícone de setinha, ao lado da casinha. Ao abrir a janela, clique em "Modelo"

Agora clique em "Editar modelo"

Agora procure por:



]]></b:skin>

Agora cole este código acima dele

#navcontainer
{
background: #808080;
margin: 0 auto;
padding:4px 0;
font-family: georgia, serif;
text-transform: lowercase;
}

/* to stretch the container div to contain floated list */
#navcontainer:after{
content: ".";
display: block;
line-height: 10px;
font-size: 12px;
clear: both;
}

ul#navlist{
height: 20px;
list-style: none;
padding: 10px;
margin: 0 auto;
width: 90%;
font-size: 0.8em;
}

ul#navlist li{
display: block;
float: left;
width: 15%;
margin: 0;
padding: 2x;
}

ul#navlist li a{
display: block;
width: 100%;
padding: 0.5em;
border-width: 1px;
border-color: #ccc #cccc #ccc #fff;
border-style: solid;
color: #000;
text-decoration: none;
background: #eee;
}

#navcontainer>ul#navlist li a { font-size: 12px;width: auto; padding: 14px 3px; }

ul#navlist li#active a{
background: #ccc;
color: #800000;
}

ul#navlist li a:hover, ul#navlist li#active a:hover{
color: #800000;
background: transparent;
border-color: #000 #fff #fff #ccc;
}

*CÓDIGO NA COR VERMELHA ACIMA SÃO AS CORES DO MENU, TROQUE-AS SE QUISER.

Se você quer o menu acima da header (cabeçalho)

Agora procure pelo seguinte código:  

<div class='header-outer'>

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>
<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">Item8</a></li> </ul>
</div>

Se você quer o menu abaixo da header (cabeçalho)

Procure por:


 </header>

e cole o código 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>
<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">Item8</a></li> </ul>
</div>

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