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:

<!-- start header --><div id="'header_wrap'"><b:section class="'header'" id="'header'" maxwidgets="'1'" showaddelement="'no'">

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 : http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/



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