Ads 468x60px

Criando menu posicionado no topo do blog

Neste post vou ensinar a criar um menu que fica bem no topo do seu blog, igual eu uso aqui no Tech And Blogger mas com estilos diferentes. Recomendo que use ele colocando os links de contato, termos, sugestões e essas coisas, pois ele ficará bem no topo do seu blog e também os links ficam alinhados à direita do template.


Para adicionar é bem simples, vá ao seu editor de HTML e procure pela seguinte tag:
</head>
Encontrando a tag, colo o seguinte código ABAIXO dela:
<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>

Pronto, seu novo menu está posicionado acima de tudo no blog.
É importante lembrar, que se você utiliza a navbar própria do Blogger este menu se posicionará acima dela também!

6 comentários:

JACN disse...

O modelo é inválido porque a tag 'div' aparece dentro da tag 'head'.

Error 500

O que faço?

Denis Gomez disse...

João, é para colocar ABAIXO de /head. Ou seja, quando fechamos o head!

Anônimo disse...

isso e pra ficar la em cima como o primeiro menu tipo fale conosco inicio termos de uso e tal

Denis Gomez disse...

Sim, ele ficará igual tem aqui no T&B, porém trocado o laranja por azul...

Unknown disse...

Olá eu gostei muito valew

Denis Gomez disse...

Obrigado Izaque

Postar um comentário