 |
| Menu no Topo - Blogger |
- Aprenda a colocar um Menu Scroll Fixo - Novidade
- Três diferentes menus para o Blog
Boas pessoal! Bem-vindos ao primeiro tutorial do Blogger Uncomplicated Works, e como o nome indica, não vamos fazer nada de complicado: o tutorial é sobre o menu fixo no topo. Como podem ver no meu blog existe uma barra fixa no topo, que contém as categorias do meu blogger assim como uma caixa de pesquisa, e neste tutorial vou apenas ensinar a colocar as categorias e depois mais tarde irei abordar a colocação de uma caixa de pesquisa e ícones para as redes sociais. Caso estejam interessados nisso neste momento, deixem algo nos comentários, e irão obter a minha ajuda. Contudo, para já vamos apenas criar o menu fixo no topo, que é como eu já disse, bastante simples. A primeira etapa para colocarmos o menu fixo no topo do blogger, é inserirmos este código no HTML do blog. Este código terá de ser colocado depois de " <body expr:class='"loading" + data:blog.mobileClass'> " Podem simplesmente pressionar Ctrl + F para uma busca mais rápida.
<div class='menutopo'>
<nav class='menu'>
<a href='#' title="Home" >Home</a>
<a href='#' title="Templates" >Templates</a>
<a href='#' title="Tutoriais">Tutoriais</a>
<a href='# title="Windows"'>Windows</a>
</nav>
</div>
Depois de inserir o código HTML do nosso menu fixo vamos modificá-lo a nosso gosto, onde se encontra # colocamos o url desejado. O title é a informação que irá aparecer quando o rato estiver sobre o texto e o que se encontra entre >Aqui</a> substituímos de forma a que o menu fique do nosso agrado. Para que o menu fixo no topo do blogger esteja pronto, só necessitamos de inserir o código CSS, pressionamos Ctrl+F e pesquisamos por ]]></b:skin> e antes disso vamos colocar o seguinte código:
nav.menu a {
position: relative;
display: inline-block;
margin: 15px 25px;
outline: none;
text-decoration: none;
font-family: 'Laila',serif;
font-size: 18px;
color: rgba(30, 144, 255, 0.7);
transition: border 0.3s, color 0.4s linear;
}
.menutopo {
position: fixed;
height: 60px;
width: 100%;
z-index: 1;
background: black;
}
nav.menu a:hover {
color: white;
border-bottom: 3px solid white;
}
Feito isto, temos o menu no topo do blogger assim: Teste Menu
Para modificarem o menu a vosso gosto, podem alterar algumas partes como:
'color: red' - color define a cor do texto, ou seja, depois dos dois pontos vamos colocar a cor que nós desejamos, onde aparece nav.menu a:hover é a cor do texto quando o rato está sobre o texto.
'background: black' - define a cor do fundo do menu, alterem para os valores que desejarem.
Boas dicas mas o que é o URL??
ResponderEliminarQuando dizes "onde se encontra # colocamos o url desejado" significa exatamente o quê?
Obrigada
Oi, o url é o local que será redireccionado quando clicar sobre o texto, por exemplo o url desta postagem é 'http://www.uncomplicatedworks.com/2015/01/menu-fixo-no-topo-do-blogger.html', ficou a perceber? ou quer que explique de outra forma?
EliminarQualquer coisa disponha!
Obrigaga Gonçalo pela clara explicação.
EliminarAinda bem que ficou a perceber, se precisar de algo em especial para o seu blog, disponha!
Eliminar