Circuito Rede Cerebral: Menu no Blog

Nesta postagem ensinarei passo a passo como criar um Menu e adicioná-lo ao Blog.
Vou apresentar dois modelos de Menu e decada modelo, dois formatos.

Observações:
✔ Todos os códigos abaixo podem ser alterado caso necessário
✔ Os Menus estão montados em um Padrão de WebPage 800x600px [px = pixel]
✔ Cada exemplo possui 3 links e/ou 3 sublinks
✔ Onde há um código de cor para background [preenchimento] pode ser alterado para imagem, basta substituir a cor por url(http://url da imagem.formato da imagem/)
✔ Atenção ao remover ou adicionar códigos da cor AZUL para que não seja desconfigurado
✔ Não altere os valores em VERDE.
✔ Caso tenha dúvidas para alterar os códigos em VERMELHO, consulte algumas postagem que poderão te ajudar: Background • Tabelas de Cores • Curso Básico de CSS (Em Construção)

Legenda as Tag's:

li » Linha
ul » Coluna
div id="" » Comando [div] para identidade [id]

Modelo Horizontal - Simples

Parte HTML do Menu:

</ul>

</div>

Parte CSS do Menu:

#menubar {

background : url('URL da imagem') repeat-x;

font-family : "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;

width : 800px;

height : 40px;

padding : 0;

}

#menunav {

margin : 0;

padding : 0;

}

#menunav ul {

float : left;

list-style : none;

margin : 0;

padding : 0;

}

#menunav li {

list-style : none;

margin : 0;

padding : 0;

}

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

color : #ffffff;

display : block;

font-size : 10px;

font-weight : normal;

text-transform : uppercase;

margin : 0px 0px 0 0;

padding : 0px 8px 0px 8px;

line-height : 40px;

}

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

background : url('URL da imagem') repeat-x;

color : #ffffff;

display : block;

text-decoration : none;

margin : 0px 0px 0 0;

padding : 0px 8px 0px 8px;

line-height : 40px;

}

Modelo Horizontal - Composto

Parte HTML do Menu:

<li><a href="/">SubLink 1</a></li>

<li><a href="/">SubLink 2</a></li>

<li><a href="/">SubLink 3</a></li>

</ul>

</li>

<li><a href="/">SubLink 1</a></li>

<li><a href="/">SubLink 2</a></li>

<li><a href="/">SubLink 3</a></li>

</ul>

</li>

<li><a href="/">SubLink 1</a></li>

<li><a href="/">SubLink 2</a></li>

<li><a href="/">SubLink 3</a></li>

</ul>

</li>

</ul>

</div>

Parte CSS do Menu:

#menubar {

background : url('URL da imagem') repeat-x;

font-family : "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;

width : 800px;

height : 40px;

padding : 0;

}

#menunav {

margin : 0;

padding : 0;

}

#menunav ul {

float : left;

list-style : none;

margin : 0;

padding : 0;

}

#menunav li {

list-style : none;

margin : 0;

padding : 0;

}

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

color : #ffffff;

display : block;

font-size : 10px;

font-weight : normal;

text-transform : uppercase;

margin : 0px 0px 0 0;

padding : 0px 8px 0px 8px;

line-height : 40px;

}

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

background : url('URL da imagem') repeat-x;

color : #ffffff;

display : block;

text-decoration : none;

margin : 0px 0px 0 0;

padding : 0px 8px 0px 8px;

line-height : 40px;

}

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

background : url('URL da imagem') repeat-x;

width : 140px;

float : none;

margin : 0;

padding : 0px 8px 0px 8px;

border-bottom : 1px solid #ffffff;

border-left : 1px solid #ffffff;

border-right : 1px solid #ffffff;

line-height : 30px;

}

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

background : #888888 url(URL da imagem) repeat-x;

margin : 0;

padding : 0px 8px 0px 8px;

line-height : 30px;

}

#menunav li {

float : left;

padding : 0;

}

#menunav li ul {

z-index : 9999;

position : absolute;

left : -999em;

height : auto;

width : 160px;

margin : 0;

padding : 0;

}

#menunav li ul a {

width : 140px;

}

#menunav li ul ul {

margin : -25px 0 0 161px;

}

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

left : -999em;

}

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

left : auto;

}

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

position : static;

}

Modelo Vertical - Simples

Parte HTML do Menu Simples:

<ul>

</ul>

</div>

Modelo Vertical - Composto

Parte HTML do Menu Composto:

<ul>

<li class="li_nc"><a href="#" target="_self" >Sublink1</a></li>

<li class="li_nc"><a href="#" target="_self" >SubLink2</a></li>

<li class="li_nc"><a href="#" target="_self" >Sublink3</a></li>

</ul></li>

<li class="li_nc"><a href="#" target="_self" >Sublink1</a></li>

<li class="li_nc"><a href="#" target="_self" >Sublink2</a></li>

<li class="li_nc"><a href="#" target="_self" >Sublink3</a></li>

</ul></li>

<li class="li_nc"><a href="#" target="_self" >Sublink1</a></li>

<li class="li_nc"><a href="#" target="_self" >Sublink2</a></li>

<li class="li_nc"><a href="#" target="_self" >Sublink3</</li>

</ul></li>

</ul>

</div>

Parte CSS dos Menus Simples-Composto:

.mainmenu{

width: 15em;

padding: 0;

float: left;

}

.mainmenu ul {

float: left;

width: 100%;

list-style: none;

line-height: 1;

color:#FFFF00;

background: #000080;

padding: 0;

border: solid #A0A0A4;

border-width: 1px 1px;

margin: 0 0 0 0;

}

.mainmenu a, .mainmenu a:visited {

display: block;

width: 100%;

font-family:Arial, Helvetica, sans-serif;font-size:0.8em;font-weight:bold;font-style:normal;text-decoration:underline;

color: #FFFF00;

text-decoration: none;

padding: 1em 0em;

text-indent:1em;

margin: 0;

}

.mainmenu li li a{padding:1em;text-indent:0;}

.mainmenu ul ul a{

width:100%;

height:100%;

}

.mainmenu ul a{

width: 100%;

}

.mainmenu li {

float: left;

width:100%;

margin:0;

padding:0;

}

.mainmenu ul li {float:left; position:relative; }

.mainmenu ul li {width:100%;}

.mainmenu li ul {

position: absolute;

left: -999em;

height: auto;

width:15em;

background: #000080;

font-weight: normal;

border-width: 1px;

margin: 0;

}

.mainmenu li li {

width: 100% ;

}

.mainmenu li a{width: 100% ; }

.mainmenu li li a{

width: 100%;

}

.mainmenu li ul {

margin: 0 0 0 0;

}

.mainmenu li ul ul {

margin: 0 0 0 0;

}

.ul_ch,

.mainmenu li:hover ul ul,

.mainmenu li li:hover ul ul,

.mainmenu li li li:hover ul ul,

.mainmenu li li li li:hover ul ul,

.mainmenu li li li li li:hover ul ul

{

left: -999em;

}

.mainmenu li:hover ul,

.mainmenu li li:hover ul,

.mainmenu li li li:hover ul,

.mainmenu li li li li:hover ul,

.mainmenu li li li li li:hover ul

{

left: 100%;

}

.mainmenu li:hover>ul.ul_ch

{

left: 100%;

}

.mainmenu li:hover{

background: #FF0000;

}

.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{

color:#FFFF00;

}

.mainmenu li:hover li a, .mainmenu li li:hover li a,

.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,

.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited,

.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited

{

color:#FFFF00;

}

.mainmenu li li:hover, .mainmenu li li li:hover,

.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover

{

background: #B90000;

z-index:9999;

}

.mainmenu li li:hover a,.mainmenu li li li:hover a,

.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a

{

color: #FFFF00;

}

.mainmenu ul ul a, .mainmenu ul ul a:visited,

.mainmenu li li a, .mainmenu li li a:visited

{

color: #FFFF00;

}

.mainmenu ul ul a:hover,

.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,

.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,

.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,

.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,

.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{

color: #FFFF00;

}

.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,

.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,

.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,

.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{

color: #FFFF00;

}

Como adicionar o Menu ao Blog:

Para cada tipo e formato de template há diferentes configurações de código. Antes de adicionar um código ao template precisa-se ter conhecimento dos códigos que geram cada elemento do Blog. Identifiqueo local e posicionamento do menu e a partir disso procure pelos códigos que formam a região onde ficará o Menu.

Noção Básica de Formação:

Um Blog possui Colunas e Caixas. E é dentro das Caixas que é colocado o "conteúdo do blog" (elementos: textos, widgets, imagens, objetos, etc). Veja abaixo uma réplica de um Blog com 3 colunas na sua estrutura elementar.

Legenda: (Separada por números e cores)

1 - Caixa da coluna HTML da página (English: HyperText Mark-up Language - Português BR: Linguagem de Marcação de HiperTextos)
2 - Caixa da coluna BODY da página (Corpo da página)
3 - Caixa da coluna BLOG [outer] da página (Corpo do Blog)
4 - Caixa da coluna HEADER da página (Cabeçalho)
5 - Caixa da coluna MENU da página (Menu)
6 - Caixa da coluna BLOG2 [outer2] da página (Segundo Corpo do Blog - poucos blogs possuem)
7 - Caixa da coluna SIDEBAR-LEFT da página (Coluna Lateral da Esquerda)
8 - Caixa da coluna POST [main] da página (Coluna Centra de Postagens e Comentários)
9 - Caixa da coluna SIDEBAR-RIGHT da página (Coluna Lateral da Direita)
10 - Caixa da coluna FOOTER da página (Rodapé)
11 - Conteúdo do Blog ou Elementos [textos, widgets, imagens, objetos, etc]

De acordo com o esquema acima você conseguirá encontar os códigos facilmente, caso não os encontre através do explicativo abaixo.

Menu Horizontal:

Acesse o Painel [ http://www.blogger.com/ ], clique em Layout e depois na guia Editar HTML.
Localize [tecla de atalho: Ctrl+F] um local nos códigos CSS do Blog o seguinte código:

#outer-wrapper {

(Vai ter algum código aqui)

}

Esse código corresponde ao itém 3 da lista no esquema acima.
Logo abaixo desse código vem os códigos de Sidebar-left, Main e Sidebar-right. Mas, caso seu blog tenha 2 coluna, os próximos códigos serão Sidebar e Main ou Main e Sidebar, pois dependem da posição no blog.

#sidebar-left-wrapper {
(Vai ter algum código aqui)
}

#main-wrapper {
(Vai ter algum código aqui)
}

#sidebar-right-wrapper {
(Vai ter algum código aqui)
}

Após ter encontrado, crie umu novo elemento. Adicione o código a seguir acima dos outros código [Sidebar e Main]:

#menu-wrapper {
float : $startSide;
word-wrap: break-word;
overflow: hidden;
}

Abaixo do código da caixa do menu, coloque os códigos CSS do Menu.
Em seguida localize [Ctrl+F] o código HTML do Main:

"Apenas" se tiver uma Sidebar "antes" da Main procure por:

Note que acima desse código haverá uma finalização: </div>. Abaixo dela coloque este código:

</div>

Clique em Salvar Modelo e se não houver erros vá para a guia Elementos da página.
Agora repare que apareceu uma nova caixa de elementos acima das colunas [Sidebar e Main]. Clique em Adicionar um Gadget. Na janela popup que abriu, clique em HTML/JavaScript. Não coloque um Título [pois aparecerá acima do menu], em Conteúdo coloque os códigos HTML do Menu. Em seguida, clique em Salvar.

Menu Vertical:

Acesse o Painel [ http://www.blogger.com/ ], clique em Layout e depois na guia Editar HTML.

Localize [tecla de atalho: Ctrl+F] um local nos códigos CSS do Blog o seguinte código:

body {
(Vai ter algum código aqui)
}

Logo abaixo dele coloque os códigos CSS do Menu.
Clique em Salvar Modelo e se não houver erros vá para a guia Elementos da página.
Agora clique em Adicionar um Gadget. Na janela popup que abriu, clique em HTML/JavaScript. Não coloque um Título [pois aparecerá acima do menu], em Conteúdo coloque os códigos HTML do Menu. Em seguida, clique em Salvar.

Caso ocorra algum erro, comente-o logo abaixo.
Obrigado!