Adicionando menu posicionado no topo do blog

Compartilhar:
Olá queridos leitores, hoje trago à vocês um menu posicionando no topo do seu blog onde você poderá colocar os link que quiser e personalizá-lo como quiser! O menu tem um estilo simples, mas elegante. Ele não rola junto com seu blog, ele sempre ficará "preso" no topo do blog sem sair do lugar. Caso queira ver a demonstração, clique aqui.
1. Acesse a guia Modelo e clique no botão Editar HTML. Depois, pressione Ctrl+F para abrir o Localizador e procure ela tag abaixo.

</head>

2. Imediatamente, abaixo desta tag cole o código a seguir. Se preferir fazer modificações no código, pode fazer. Lembre-se de modificar os link e seus nomes. Os links do menu ficarão da cor que são os links do seu blog.

<style type='text/css'>

#menuprincipal2 {width:100%; height:30px; background-color:#06C; background-color:#333; border-bottom:#4682B4 solid 2px;}

.linksmtopo2 {font-family:Arial, Helvetica, sans-serif; font-size:15px; text-decoration:none; padding:5.5px; color:#FFFFFF; text-align:right;}

.linkstopo2 {height:30px; text-decoration:none; color:#FFFFFF; padding:7px;}

.linkstopo2:hover {background-color:#494949; border-top:#4682B4 solid 1.5px; padding:7px; height:30px; padding-top:4px; color:#FFFFFF; text-decoration:none;}

</style>

<div id='menuprincipal2'>
<div class='linksmtopo2'>
<a class='linkstopo2' href='#'>Edite o Link</a>
<a class='linkstopo2' href='#'>Edite o Link</a>
<a class='linkstopo2' href='#'>Edite o Link</a>
<a class='linkstopo2' href='#'>Edite o Link</a>
<a class='linkstopo2' href='#'>Edite o Link</a>
</div>
</div>

Entendendo o código: A parte do código que foi negritada, refere-se à folha de estilos do menu. Nesta parte, você poderá fazer alterar a aparência do menu. Nas partes destacadas de vermelho, refere-se o link do texto. Já a parte destacada de azul, refere-se ao nome do link.

3. Depois, clique em Visualizar e se estiver tudo correto, clique em Salvar modelo.

Pronto, seu menu está adicionado. Agora basta colocar os link mais importantes do seu blog nele! Utilize os botões abaixo para compartilhar o artigo e boa sorte!
► Postagens Relacionadas:

8 Comentários

Adriana Silva disse...

Muito bom, perfeito! procurei procurei...

Como faço para centralizar ou a esquerda? pois para mim o menu aparece a direita.


Obrigado!!!

23 de abril de 2012 às 09:13
João Almeida disse...

Adriana, para você mudar a posição do texto, basta modificar a parte destacada em negrito:
.linksmtopo2 {font-family:Arial, Helvetica, sans-serif; font-size:15px; text-decoration:none; padding:5.5px; color:#FFFFFF; text-align:right;}
Espero ter ajudado.

23 de abril de 2012 às 13:44
Adriana Silva disse...

Valeu João...

23 de abril de 2012 às 15:30
O LARÁPIO disse...

OI AMG, COMO ALTERAR A COR DA FONTE? ELA ESTÁ NA COR AZUL E EU QUERIA BRANCA. OBRIGADO.

11 de julho de 2012 às 16:11
João Almeida disse...

Como o texto é um LINK ele vai ficar da cor do link de seu blog. Com isso, infelizmente, ão tem como alterar. Até eu mesmo já tentei de tudo, mas foi sem sucesso.

11 de julho de 2012 às 19:36
Iara disse...

Oi, João! Valeu pela dica... Funcionou legal no meu blog.

28 de agosto de 2012 às 23:08
João Almeida disse...

Ficamos felizes que tenha gostado e conseguido. Volte sempre e obrigado!

29 de agosto de 2012 às 16:40
Vitor Leal disse...

Ja tentou criar uma class para cor ? Assim como se cria para o negrito?
b, strong {#cor
S,{#cor
L,{#cor - dos links

28 de agosto de 2013 às 08:26

Postar um comentário