30 junho 2014

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


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
  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

» Nossas redes sociais: Fã page | | Instagram | | Pinterest

» Críticas construtivas são sempre bem vindas.

» Deixe o link do seu blog no final do comentário e retribuiremos a visita com carinho.

» Lembre-se, tudo aqui é feito para você, então fique a vontade para pesquisar,ler,comentar e pedir postagens.

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