[Semana de tutoriais] #01 Menu fixo no topo do blog

30 de junho de 2014


Hey pessoal! Como estão vocês? espero que estejam ótimos! peço desculpas pela demora das postagens, estava um pouco fora de órbita e foquei um pouco nos estudos também. Como o blog está bem parado resolvi fazer uma semana de tutoriais para dar uma "chacoalhada" por aqui, a maioria de vocês gosta bastante e aqui estou, sete dias de tutoriais! 

Resolvi começar com os pedidos que estavam acumulados na Ask.



Cheguem mais.




É o menu atual do blog, podem vê-lo on line aqui no TF ou no blog de previews

1 - Vá no seu HTML ( Painel>>modelo) clique em alguma parte do HTM e tecle ctl + f e procure por 
]]></b:skin> Acima cole o seguinte código, modificando onde for indicado.

/* Menu fixo editado por Teens Forever
----------------------- */
#navtop {
border-bottom:1px dotted #f4f2f2;
background-color: rgba(255,255,255, 10.0);
top: 0px;
width: 100%;
height: 6%;
left: 0px; padding-right: 100px;
padding:0px 3px;
position:fixed;
opacity: 0.8;
z-index:1000;
}
#navtop li {
text-align: center;
float: left;
display: block;
padding:3px;
padding-left: 10px;
padding-right: 10px;
}
#navtop li a, #navtop li a:link, #navtop li a:visited { /*--links do menu--*/
float: center;
display: block;
padding: 3px;
text-transform: uppercase;
text-decoration:none;
background: transparent;  /*--Edite cor de fundo dos links--*/
color:#999;    /*--Edite cor dos links--*/
font-size:24px;   /*--Edite tamanho da fonte--*/
font-family: 'Didact Gothic', sans-serif; font-weight: strong; /*--Edite a fonte do menu--*/
border-bottom: 1px dotted transparent;
}
#navtop li a:hover {   /*--links no estado hover--*/
background: #fff;
color:#666;   /*--Edite cor dos links--*/
text-decoration:none;
border-bottom: 1px solid #666;
}
#navtop li ul {
display: none;
}

Após terminar de editar salve.

2 - Agora procure por <body no seu HTML ele pode vir acompanhado de outra linha de código mais não importa, ABAIXO dele cole o seguinte código editando conforme for necessário

<div id='navtop'>
<li><a href='LINK' title='NOME QUANDO PASSA O MOUSE'>NOME</a></li>
<li><a href='LINK' title='NOME QUANDO PASSA O MOUSE'>NOME</a></li>
<li><a href='LINK' title='NOME QUANDO PASSA O MOUSE'>NOME</a></li>
<li><a href='LINK' title='NOME QUANDO PASSA O MOUSE'>NOME</a></li>
<li><a href='LINK' title='NOME QUANDO PASSA O MOUSE'>NOME</a></li>
</div>

Se necessário adicione ou retire linhas do código, visualize, salve e pronto! 

Se tiverem pedidos peçam pelos comentários ou pela ask  

8 comentários:

  1. Que legal o tutorial! Muito útil,

    ResponderExcluir
  2. Sempre quis saber esse tutorial! Muito bom!

    ResponderExcluir
    Respostas
    1. Que bom que gostou! ele é bastante útil!

      Excluir
  3. Muito obrigado pelo tutorial! Você saberia me dizer o que eu tenho que alterar para que as palavras do menu fiquem centralizadas? Valeu e parabéns pelo blog!

    ResponderExcluir
    Respostas
    1. Não recomendo tentar centralizar esse menu ele fica bagunçado. É só procurar no codigo do menu por float: left; e troque left (esquerda) por center (centro) :)

      Excluir
  4. oi tenho uma dúvida como muda o negocio do blog de quando passa o mouse ? tipo o seu é verde e vermelho queria saber como mudar ^^ a propósito seu blog é cute demais ^^ vou seguir bjsss

    ResponderExcluir
  5. Amei o menu! Estou usando lá no meu blog.
    https://menina-do-oculos-vermelho.blogspot.com
    Beijos

    ResponderExcluir

Fã page | Twitter | Instagram

Críticas construtivas são sempre bem vindas.
Deixe o link do seu blog no final do comentário e retribuiremos a visita
Aceitamos TAG's, se não a respondermos, provavelmente nós já devemos ter respondido anteriormente por outra indicação.
Lembre-se, tudo aqui é feito para você, então fique a vontade para pesquisar,ler,comentar e pedir postagens.

© BELEZA NERD 2013 - 2018. Todos os direitos reservados.
Layout e codificação: GLEICY HANER - DESIGNS E FOTOGRAFIA .
Tecnologia do Blogger.
imagem-logo