Menu Horizontal com Css e Submenu para Blog (Blogspot)

E aí pessoal, vamos aqui com mais um tutorial!
Desta vez vou atender o pedido do Gustavo Maciel, ele perguntou como colocar um Menu Horizontal no Blog igual ao que temos em nosso Blog.

Como você vê na imagem abaixo, este é um "Menu com Submenu" que fica na Horizontal posicionado abaixo do cabeçalho do blog, ele é bastante eficaz para organizar as páginas do Blogger.

Como colocar Menu com Submenu Horizontal no Blog  

Então pessoal vamos ao trabalho, e seguir os passos.

1° Passo: Acesse o painel de edição do seu blog.

2° Passo: Agora vamos editar o HTML do seu blog, então vá na opção "Modelo" >> depois em "Editar HTML" e clique em Prosseguir:

3° Passo: Agora procure por esse Tag no HTML:

]]></b:skin>

E para facilitar a sua busca pelo o Tag, utilize as teclas de Pesquisa (Ctrl+F) do seu Teclado.

4° Passo: Apos encontrar o Tag, acrescente esse CSS  logo acima dele:

/*-------Menu Horizontal---*/

#nav {

        background: #045F98 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIMZ9yh8wQVNziKx-dWTcacAkvz69NmkFojDCs_lMrEtVRBf9z0h-Dm_3rncE5_6T93BWveBFE00feOC5CWNuiVdohyphenhyphenOmxTIKQQyJy3x39bJWvt5KW8HvtpnXHJYAWlpKRdPH3UMqIq9k/s1600/tttttttt.png) repeat-x bottom;

width:940px;

font: bold 14px "ms sans serif", verdana, arial;

color: #a79578;

margin: 0 auto 0px;

padding: 0px auto 0px;

        height:55px;

}

#navleft {

width: 700px;

float: left;

margin: 0;

padding: 0;

}

#navright {

width: 250px;

font-size: 11px;

float: right;

margin:0px;

padding:0px;

}

#nav ul {

float: left;

list-style: none;

margin: 0;

padding:0;

}

#nav li {

list-style: none;

margin: 0;

padding: 0;

}

#nav li a, #nav li a:link, #nav li a:visited {

        background: #045F98;

color: #fff;

display: block;

font-weight: bold;

text-transform: none;

padding: 15px 10px 17px 10px;

       margin: 0 5px 0 0;

}

#nav li a:hover, #nav li a:active {

        background:#045F98;

        color:#fff;

padding: 15px 10px 17px 10px;

       margin: 0 5px 0 0;

text-decoration: none;

}

#nav li li a, #nav li li a:link, #nav li li a:visited {

background: #045F98;

width: 150px;

color: #FFF;

        font: normal 14px "ms sans serif", verdana, arial;

text-transform: none;

float: none;

margin: 0;

padding:13px 10px;

        border-bottom:1px dotted  #363636;

        border-right:1px solid #363636;

        border-left:1px solid #363636;

}

#nav li li a:hover, #nav li li a:active {

background:   #363636;

color: #FFF;

padding:13px 10px;

}

#nav li {

float: left;

padding: 0;

}

#nav li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 170px;

margin: 0;

padding: 0;

}

#nav li ul a {

width: 140px;

}

#nav li ul ul {

margin: -32px 0 0 171px;

}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

left: -999em;

}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {

left: auto;

}

#nav li:hover, #nav li.sfhover {

position: static;

}

5° Passo: E depois de acrescentar o Css, vamos colocar o Script do menu no cabeçalho do Blog. Então você vai procurar por esse outro Tag:

</header>

6° Passo: Quando encontrar o Tag "</header>" coloque esse código logo abaixo dele:

<div id='nav'>

<div id='navleft'>

      <ul>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>TITULO</a>

<ul>

<li><a href='ENDEREÇO DA PAGINA 1'>TITULO1</a></li>

<li><a href='ENDEREÇO DA PAGINA 2'>TITULO2</a></li>

<li><a href='ENDEREÇO DA PAGINA 3'>TITULO3</a></li>

</ul>

</li>

<li><a href='#'>TITULO</a>

<ul>

<li><a href='ENDEREÇO DA PAGINA 1'>TITULO1</a></li>

<li><a href='ENDEREÇO DA PAGINA 2'>TITULO2</a></li>

<li><a href='ENDEREÇO DA PAGINA 3'>TITULO3</a></li>

</ul>

</li>

<li><a href='ENDEREÇO DA PAGINA'>TITULO</a></li>

<li><a href='ENDEREÇO DA PAGINA'>TITULO</a></li>

</ul>

</div>

   </div>

Edite o Código

Pronto pessoal, esse segundo código é o lugar onde vocês vão editar o titulo dos menus e submenus, e alterar  o endereço de cada determinada pagina.

Observe que no código eu deixei todo bem explicado e destacado em cores.

• Em cor Azul você vai substituir pelo endereço da determinada pagina.
• Em cor Vermelha você vai dar um titulo para os menus.

E por fim você visualiza pra ver se esta tudo certo, e depois salve o modelo.

Mudar a cor do menu:

Uma outra questão que vou explicar também é, se caso você queira mudar a cor do menu, pois o menu esta em cor azul, então para mudar a cor do menu é bem simples:

Veja que no primeiro código CSS eu destaquei duas partes em (Azul e Vermelho).

• Então! A parte que esta destacada em cor Azul " #045F98" você vai substituir por uma cor que você queira colocar no menu, se você quiser escolher uma cor clique Aqui.

• A parte que destaquei em cor vermelha: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIMZ9yh8wQVNziKx-dWTcacAkvz69NmkFojDCs_lMrEtVRBf9z0h-Dm_3rncE5_6T93BWveBFE00feOC5CWNuiVdohyphenhyphenOmxTIKQQyJy3x39bJWvt5KW8HvtpnXHJYAWlpKRdPH3UMqIq9k/s1600/tttttttt.png" se trata do link de uma imagem, ou seja, neste caso você terá que criar uma imagem com a cor que deseja colocar no menu, entretanto a imagem terá que estar com o mesmo tamanho dessa imagem:

Baixe essa imagem

Então você baixa essa imagem pra o seu computador e edita com a cor desejada, e em seguida hospede a imagem e substitua o endereço que esta no código pelo endereço da sua imagem:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIMZ9yh8wQVNziKx-dWTcacAkvz69NmkFojDCs_lMrEtVRBf9z0h-Dm_3rncE5_6T93BWveBFE00feOC5CWNuiVdohyphenhyphenOmxTIKQQyJy3x39bJWvt5KW8HvtpnXHJYAWlpKRdPH3UMqIq9k/s1600/tttttttt.png".

E pronto pessoal, agora só Salvar o modelo e aproveitar o blog.