Vamos aos códigos, primeiro procure pela tag </head> e ABAIXO dela coloque o seguinte código:
<style type='text/css'>
#menudetopo {
width:100%;
height:30px;
background-color:#1C1C1C;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
position:fixed;
}
.linksmtopo2 {
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
text-decoration:none;
padding:5.5px;
color:#FFFFFF;
text-align:center;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.linkstopo2 {
height:30px;
text-decoration:none;
color:#FFFFFF;
padding:7px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.linkstopo2:hover {
background-color:#363636;
padding:7px;
height:30px;
padding-top:5.5px;
color:#FFFFFF;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
</style>
<div id='menudetopo'>
<div class='linksmtopo2'>
<a class='linkstopo2' href='URL-DO-LINK'>NOME-DO-LINK</a>
<a class='linkstopo2' href='URL-DO-LINK'>NOME-DO-LINK</a>
<a class='linkstopo2' href='URL-DO-LINK'>NOME-DO-LINK</a>
<a class='linkstopo2' href='URL-DO-LINK'>NOME-DO-LINK</a>
<a class='linkstopo2' href='URL-DO-LINK'>NOME-DO-LINK</a>
</div>
</div>
Pronto, seu menu está instalado em seu blog, agora é só trocar os trechos negritados e coloridos em AZUL pelo url do link, e os negritados em VERMELHO trocar pelo nome que o link terá.
---------------------------------------
Atenção: este menu foi baseado no código de um nenu disponibilizado no blog Mundo Blogger.
12 comentários:
Ótimo Tutorial Denis, Parabéns.
Obrigado Caio, pela visita e pelo comentário :)
Muito bom esse menu, parabéns pelo artigo Denis!
Que bom que gostou! Obrigado pela visita, elogio e comentário Herlan...
Denis como faz aquele menu com a linha mágica para templates do novo designer modelo?
Eliel, pretendo fazer um tutorial deste mas acho que sairá no Mundo Blogger!
Mto bom esse menu que acompanha a página. Obrigado
Ótimo artigo e excelente dica.
Parabéns!
Ótimo, agora como faz para colocar a barra acompanhando o rodapé?
muito obrigado mas no meu as imagens do blog ficam por cima do menu quando deslizo a pagina
TUDO Q EU PRECISAVA OBG
Postar um comentário