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!
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!
8 Comentários
Muito bom, perfeito! procurei procurei...
23 de abril de 2012 às 09:13Como faço para centralizar ou a esquerda? pois para mim o menu aparece a direita.
Obrigado!!!
Adriana, para você mudar a posição do texto, basta modificar a parte destacada em negrito:
23 de abril de 2012 às 13:44.linksmtopo2 {font-family:Arial, Helvetica, sans-serif; font-size:15px; text-decoration:none; padding:5.5px; color:#FFFFFF; text-align:right;}
Espero ter ajudado.
Valeu João...
23 de abril de 2012 às 15:30OI AMG, COMO ALTERAR A COR DA FONTE? ELA ESTÁ NA COR AZUL E EU QUERIA BRANCA. OBRIGADO.
11 de julho de 2012 às 16:11Como 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:36Oi, João! Valeu pela dica... Funcionou legal no meu blog.
28 de agosto de 2012 às 23:08Ficamos felizes que tenha gostado e conseguido. Volte sempre e obrigado!
29 de agosto de 2012 às 16:40Ja tentou criar uma class para cor ? Assim como se cria para o negrito?
28 de agosto de 2013 às 08:26b, strong {#cor
S,{#cor
L,{#cor - dos links
Postar um comentário