Criar e colocar menu horizontal abaixo do título

Neste tutorial vou ensinar a inserir um menu bem legal abaixo do título do blog apenas com HTML e CSS. Esse menu é simples com botões que podem ser personalizados.

Um menu na parte superior da página é forma mais útil de atrair o seu visitante a navegar dentro do seu site através de categorias pré selecionadas. Primeiramente você define qual o assunto principal do seu site, depois, cria páginas com essas categorias e os "linka" em um menu. No blog é a mesma coisa, pois cada "marcador" ou categoria é uma página e possui um link.

1 - Primeiramente faça um backup do seu Template.
Geralmente, alguns templates não estão habilitados a criar um elemento de página abaixo do título. Para permitir que adicionemos um elemento de página abaixo do título do blog, faça o seguinte, procure pelo seguinte código no HTML do seu blog:

Mude maxwidgets='1', para maxwidgets='2' - você estará alterando a quantidade de elemento de página no campo Header.

ude showaddelement='no' para showaddelement='yes' - você estará permitindo que o novo elemento funcione.

2 - Visualize o template para ver se tudo funciona bem, salve o template e volte para"Elementos de Página"

3 - Acesse esse site para gerar o seu menu

4 - No campo "How many links do you want in your list?" (Quantos links você deseja para a sua lista) selecione a quantidade de botões que você deseja no seu menu (Opções de 1 a 20).

5 - Pressione "Next".

6 - Aparecerá um monte de campos....cada linha corresponde a quantidade de botões que você selecionou....preencha da seguinte forma:

Link Text - Nome do Botão (ex. Vídeos)
Link Title - Nome que aparece quando se põe o mouse sobre o botão (Ex. Baixe vídeos)
Link Destination (href) - é o link destino do botão (ex. http://meublog.com/videos)

Preencha todos os campos desejados conforme as configurações acima, lembrando que cada linha corresponde a um botão, ou um link.

7 - Você será redirecionado para a página onde escolherá o modelo do link. Selecione o modelo do seu gosto, conquanto que seja horizontal, uma vez que estamos fazendo um manu horizontal. Este menu poderá ser personalizado depois.

8 - Lá no campo "How to identify and style the menu" mantenha selecionado "id" e clique em"Next".

9 - Pronto, agora foram gerados os códigos do menu. Na janela possuem dois campos, o de cima com o código HTML que irá construir uma lista com os referidos links do menu e do de baixo, com os códigos CSS, que irão estilizar esta lista e transformá-la em um menu.
No campo "Here is the HTML for this list:" (Aqui está o HTML para a lista). Copie o código deste campo.

10 - No Layout do blog, adicione um elemento de página do tipo "HTML/Javascript" e cole o código copiado aí dentro (Teclas CTRL + V). Clique em "Salvar".

11 - Salve o modelo e acesse o HTML do blog. Volte para o gerador do MENU e copie o código do campo "Here is the CSS for this list:" (Aqui está o CSS para a lista). Agora novamente no blog, dentro do HTML, procure pelo seguinte código:

body {

Muita atenção! Depois da chave " { ", existem várias definições como background, color, etc, que são fechadas com outra chave " } ". É depois desta chave " } " que você irá colar o código copiado do campo CSS ("Here is the CSS for this list:" ).

Visualise o modelo, se o menu aparecer corretamente, o processo está terminado.

Seu menu deverá aparecer semelhante ao mostrado aqui no meu blog. Você poderá personalizá-lo tanto quanto puder através do CSS, lembrando sempre de fazer um Backup anteriormente para não perder seu modelo.

Um site muito bom para obtermos dicas de CSS para estilização, é o site do Maujor. Disponibilizarei abaixo alguns links úteis para que você possa personalizar este menu. Abraços!

Propriedade Background
Propriedade Border
Propriedade Text
Outros menus e dicas
Propriedade Font

Mais posteriormente, irei ensinar a criar um sistema dentro do blog, na opção de cores e tipos de fonte, onde você poderá personalizar completamente o blog sem precisar entender de HTML ou CSS, apenas selecionando as cores e tipos de fonte.

Retirado do Blog do Palito