Menu no topo do blog #02

19 de junho de 2015


Hey galera! Como vocês estão? espero que bem. Estou bem feliz que o blog está voltando ativa e vocês continuam acompanhado o conteúdo. O blog estava com poucos views diários, porém começou a subir rapidamente e o número de seguidores também Por isso vocês são os melhores leitores que qualquer blogueiro poderia ter <3


Hoje eu trago um tutorial que foi pedido lá na ask , um menu no topo do blog já tem um tutorial de um aqui e agora vou postar outro um pouco (ou muito diferente desse) percebi que vocês gostam bastante das dicas HTML pois os views das postagens são bem maiores :3

Pedido na ask:




Esse menu eu desenvolvi para o layout de um cliente, e achei ele bem legal. Trocando as cores obvio  ele combina com quase todo tipo de layout, e tem um efeito simples e bonitinho.

A diferença é que ele não é um menu fixo, ou seja ele não desce junto com a página enquanto a gente rola o mouse, ele fica lá em cima mesmo. Eu particularmente prefiro ele assim.

Print do menu




É um menu super fácil de instalar no blog, vamos usar apenas Css

Então abra o HTML do seu blog, tecle ctrl + f e na caixinha de pesquisa cole }]]></b:skin> e logo ACIMA dessa tag cole o código abaixo modificando ao seu gosto.

/* MENU POR GLEICY HANER - TEENS FOREVER  */
.menu {
margin: 0 auto;
width: 100%;
height: 55px;
padding: 12px 0 0 0;
background: #COR-DE FUNDO-DO-MENU;
font-family: 'Arial; /*Pode alterar a fonte  */
font-size: 30px;
text-transform: uppercase; /* Deixa as letras maiúsculas se não quiser apague essa linha*/
text-align: center;
}
.menu a{font-size: 30px; /**Tamanho da fonte pode ser alterado**/
font-family: 'Arial  /**Altera a fonte novamente **/
color: #fff; /**cor da fonte**/
text-decoration:none;}
.menu a::before, .menu a::after {display: inline-block;opacity: 0;-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;-moz-transition: -moz-transform 0.3s, opacity 0.2s;transition: transform 0.3s, opacity 0.2s;}
.menu a::before {margin-right: 2px;content: '['; -webkit-transform: translatex(20px);-moz-transform: translatex(20px);transform: translatex(20px);}
.menu a::after { margin-left: 2px;content: ']';-webkit-transform: translatex(-20px); -moz-transform: translatex(-20px); transform: translatex(-20px);}
.menu a:hover::before,.menu a:hover::after,.menu a:focus::before,.menu a:focus::after { opacity: 1; -webkit-transform: translatex(0px); -moz-transform: translatex(0px);transform: translatex(0px);}
@font-face { font-family: "silkscreen"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }


Agora ainda na caixinha de pesquise procure por <body e ABAIXO dessa tag cole o seguinte código

<div class='menu'>
<a href='Link/'>Nome da sua página</a>
<a href='link'>Nome da sua página</a>
<a href='link'>Nome da sua página</a>
<a href='link'>Nome da sua página</a>
    </div>


Visualize e salve! Seu menu está pronto.

OBS: Se precisar de mais páginas apenas copie uma linha e cole abaixo da outra fazendo uma especie de lista essa linha   <a href='link'>Nome da sua página</a>

Tabela de cores aqui

Então é isso gente! Espero que tenham gostado. Se rapostarem/usarem o menu lembrem-se dar os créditos ao blog.

Até o próximo post!

30 comentários:

  1. Sem dúvida que disseste tudo!!! São os seguidores que fazem o nosso próprio blog. Acaba por ser tudo um trabalho de equipa. :D Adoro sentir todo este carinho e todo este feedback da vossa parte. Vocês, sim, fazem-me perceber que devo continuar aqui!

    O teu post é extremamente útil. Quero ver se dou uma voltinha pelo layout do meu blog :D

    InstagramFacebook Oficial PageMiguel Gouveia / Blog Pieces Of Me :D

    ResponderExcluir
    Respostas
    1. Realmente, nossos leitores é que fazem o blog e que fazem nosso trabalho valer a pena ♥ Que bom que gostou do menu! E obrigada pela visita!

      Excluir
  2. Muito legal da tua parte compartilhar as coisas que sabe amôura.

    Parabéns por isso.

    Beijoo !!

    | O Blog Que Não é Blog |

    | Esmalteca 230 |

    ResponderExcluir
    Respostas
    1. É sempre bom compartilhar conhecimento querida ♥ Obrigada pela visita!

      Excluir
  3. Aiiii, amei. Sou uó com layout haha
    Ajudou bastante esse tutorial!
    www.iamcamilakellen.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom que gostou querida! Com prática você chega lá ♥ Obrigada pela visita!

      Excluir
  4. Amo menus no topo do blog >3< esse é realmente muito bonito XD ~Kisses
    Three Wishes | http://t-hreewishes.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Eu também amo esse estilo de menu ♥ Acho que combina com todo tipo de layout haha. Obrigada pela visita!

      Excluir
  5. Amo menus, e sempre que vejo um diferente que eu curta já vou logo usando no meu blog haha !! Amei esse <3

    Beijos
    http://intoxicadosporlivros.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Eu também amo menus <3 deixam o blog bem mais bonitos e descomplicados. Obrigada pela visita!

      Excluir
  6. Muito bom esse tutorial!
    Beijos
    Bluebell Bee

    ResponderExcluir
    Respostas
    1. Que bom que gostou! Obrigada pela visita!

      Excluir
  7. Adorei o tutorial! Bem explicadinho e fácil <3
    Beijo

    Dicas para Todas

    ResponderExcluir
    Respostas
    1. Que bom que gostou querida! Obrigada pela visita!

      Excluir
  8. legal!
    http://grandemetamorphose.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom que gostou. Obrigada pela visita!

      Excluir
  9. Oi Gleicy!
    Adoro esse estilo de menu, deixa o blog muito organizado. :)
    beijos ♥
    nuclear--story.blogspot.com

    ResponderExcluir
    Respostas
    1. Eu também amo esses estilos de menus ♥ Obrigada pela visita

      Excluir
  10. Adorei e ajudou muito. Super útil.

    Beijos
    http://pimentasdeacucar.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom que gostou querida! Obrigada pela visita!

      Excluir
  11. Amei a dica! Acho que o menu que desce junto com a página é o melhor tipo, e o processo de instalar ele é bem fácil também! Valeu por disponibilizar ;)

    Beijão
    http://www.perigosasgarotas.com.br/

    ResponderExcluir
    Respostas
    1. Eu também gosto do menu que desce junto com a página, mas as vezes ele atrapalha haha. Obrigada pela visita <3

      Excluir
  12. Olá, bem legal o tutorial. Eu adoro o menu no topo do blog, mas o do meu desce junto com a página e eu prefiro assim rs.
    Um beijo

    Suellen Esposte Blog | Facebook | Youtube | Instagram

    ResponderExcluir
    Respostas
    1. Eu também adoro menu no topo do blog <3 Eu gosto das duas versões, depende bastante de cada layout. Obrigada pela visita!

      Excluir
  13. Este layout eh bem bacana. Gostei do tutorial.bjkas

    http://brilhorosablog.blogspot.com.br/

    ResponderExcluir
  14. Achei lindo seu layout.
    Beijos
    www.decaronanamoda.com

    ResponderExcluir
  15. Que menu top!!! Amei!!!
    xoxo, Sarah

    Ideias no Chuveiro

    ResponderExcluir
    Respostas
    1. Que ótimo que gostou do menu querida <3 Obrigada pela visita!

      Excluir

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