Ho ho ho! Olá people, este é o primeiro tutorial do blog e para estreiar a categoria vou ensinar como fazer um menu fixo no topo do blog, ou seja, quando você rola a página para baixo o menu continua no topo da página.
Gostou? Então vamos lá!
1º passo: Vá na aba Layout e adicione um novo gadget HTML/Javascript e cole o código abaixo.
O que está marcado de laranja pode ser alterado sem medo.
Agora, só aproveitar seu novo menu e, qualquer dúvida, podem perguntar nos comentários!
Beijos ;*
1º passo: Vá na aba Layout e adicione um novo gadget HTML/Javascript e cole o código abaixo.
<div class="fixed-nav">
<center>
<ul id=menu>
<li><a href="#">Página</a>
<li><a href="#">Página</a>
<li><a href="#">Página</a>
<li><a href="#">Página</a>
<li><a href="#">Página</a>
</li></li></li></li></li></ul>
</center>
</div>
<style>
.fixed-nav{
position: fixed;
top: 0px;
left:0px;
width:100%;
height:60px;
z-index:9999;
background:#fff;
border:none;
text-align:center;
}
.fixed-nav ul li{
list-style:none;
border:none;
vertical-align:middle;
}
li{
padding:3px;
}
#menu{
padding-left:30%;
text-align:center;
font-family:'Tahoma', sans-serif;
font-size:20px;
line-height:56px;
}
#menu a{
text-align:center;
border-bottom:2px solid transparent;
border:none;
text-transform:uppercase;
line-spacing:1px;
}
#menu a:hover{
border-bottom:2px solid #000;
color:#000;
background:#fff;
}
</style>
O que está marcado de laranja pode ser alterado sem medo.
Agora, só aproveitar seu novo menu e, qualquer dúvida, podem perguntar nos comentários!
Beijos ;*
