Oi, tudo bom?
Deu pra perceber que o blog está com algumas coisas diferentes, o cabeçalho, algumas cores e inclusive uma coisa que queria a bastante tempo mas estava pensando se realmente ia ser bom coloca-ló, que o menu fixo ali no topo.Resolvi fazer um tutorial de como eu coloquei ele aqui, e pra quem não entende de HTML vai conseguir adicionar no blog.Eu vi esse post (acredito que seja o original, no ButLariz).Vamos ao tutorial:
A aparência do menu:
1- Primeiro, copie esse código:
.menutopo { z-index: 333; position: fixed; top: 0px; left: 0px; right: 0px; height: 25px;padding:18px; color: #fff; background-color: #000; font-size: 18px; text-align: center;font-family: 'Calibri'; text-transform: uppercase; }
.menutopo a { color: #fff!important; margin-right: 20px; }
.menutopo a:hover { text-decoration:underline }
.menutopo img { margin-top: -3px; align:right; width: 35px; margin-left: 5px; float: right;}
2- Traduzindo o código:
Color: #fff - Cor da fonte (Os dois "color" tem que ser da mesma cor)
Background-color: #000 - Cor do fundo
Fonte-size: 18px - Tamanho da fonte (Alterar o numero,s em apagar o "px")
Font-family: 'Calibri' - Nome da fonte (Se não conhecer muito nomes, no Word tem os nomes)
text-transform: uppercase - Texto maiúsculo
Text-decoration: underline - Texto sublinhado (quando passa o mouse) / para tirar, é só no lugar de underline colocar none.
Padding: 18px; - Tamanho em volta. Mude o numero para deixar mais fino ou mais largo
Extra: Não sabe que cor usar? Entre nesse site que tem a tabela de cores, então copie o "Código Html"
Essas são as coisas que você pode mudar, se você não entende de css e html não mude nada além do indicado.
Colocando no Html:
3-Agora vá em Modelo e Editar Html como na imagem:
4- Aperte em qualquer lugar dentro do quadrado, e pressione CTRL+F, vai abrir uma caixa de pesquisa.Nela você digita: ]]></b:skin> E aperte Enter.
5- ANTES dessa tag → ]]></b:skin> ← cole o código que você copiou e altere o que for preciso. (Cor da fonte, do fundo, etc).Vai ficar assim:
Clique em salvar.
Esse é só o css (o estilo) do menu.Agora vamos de fato coloca-ló no layout.
6- Vá em Layout e "Adicione um Gadget" na Barra lateral (Em alguns blogs da erro se for em outro lugar).Porém, o menu vai aparecer de qualquer forma.
7- Clique em Html/JavaScript e cole o seguinte código:
<div class="menutopo">
<a href="/"> Início </a>
<a href="LINKAQUI"> TÍTULO </a>
<a href="LINKAQUI"> TÍTULO </a>
<a href="LINKAQUI"> TÍTULO </a>
</div>
LINKAQUI você vai colocar o link desejado, e em TÍTULO o nome que vai aparecer.
Se quiser mais que 3 categorias é só copiar e colocar embaixo do outro isso:
<a href="LINKAQUI"> TÍTULO </a>
Agora, é só clicar em salvar organização.Lá no blog da Lariz tem um bonus para colocar caixa de pesquisa.Prontinho, você vai ter seu menu fixo! Se acontecer algo errado ou tiverem dúvida, comentem e vou tentar ajuda-lo :D
