24 outubro 2016

Menu no topo com redes sociais e barra de pesquisa

menu no topo
Hoje vou ensinar como fazer um Menu fixo no topo do blog, nele contém as suas páginas, redes sociais e uma barra de pesquisa. Você pode escolher se quer que ele desça de acordo com o movimento na barra de rolagem ou se prefere que ele permaneça no topo do blog.

Lembram do template free que disponibilizei aqui para vocês? Então, vamos começar a personalizá-lo hoje! Esta barra foi pensada para colocar nesse layout free, mas você pode personalizá-la para seu blog do jeito que preferir!
  • Todas as cores dos tutoriais para este layout serão neutras mas você pode mudar para combinar com seu blog.
  • Todos os tutoriais disponíveis até hoje para este layout estão disponiveis aqui


Quer aprender como fazer o menu? Então segue o tutorial!

  1. Vá no blog que deseja colocar o Menu.
  2. Em seguida vá em modelo, clique em "Editar HTML"
  3. Clique em qualquer espaço dentro do código
  4. Clique em Ctrl + F  ( Irá aparecer uma barrinha de pesquisa )
  5. Dentro da barrinha de pesquisa procure por <body e clique em enter
  6. Copie todo o código a seguir e cole abaixo de <body 

<div class='top_header clearfix'>
<div class='ct-wrapper'>

<!-- blog_main_navigation_menu -->
<div class='nav-menu'>
<ul class='clearfix blog_menus'>
<li><a class='current' href='/'>Home</a></li>
<li><a href='LINK DA SUA PÁGINA'>Sobre mim</a></li>
<li><a href='LINK DA SUA PÁGINA'>FAQ</a></li>
<li><a href='LINK DA SUA PÁGINA'>Moda</a></li>
<li><a href='LINK DA SUA PÁGINA'>Redes sociais</a></li>
<li><a href='LINK DA SUA PÁGINA'>Blogroll</a></li>
<li><a href='LINK DA SUA PÁGINA'>Contatos</a></li>
</ul>
</div>

<div class='right clearfix social_search'>
<div class='search_from right'>
<div class='search-form-wrapper'>  
<form action='/search' method='get' role='search'>
<input name='q' placeholder='Digite e dê enter' type='text'/>
</form>

<span class='search-form-icon'><span class='fa fa-search'/></span>
                      
</div>
</div>
<div class='social-wrap left'>
<ul class='dslc-social'>
<li><a href='LINK DO TWITTER' target='_blank'><span class='fa fa-twitter'/></a></li>
<li><a href='LINK DO FACEBOOK' target='_blank'><span class='fa fa-facebook'/></a></li>
<li><a href='LINK DO YOUTUBE' target='_blank'><span class='fa fa-youtube-play'/></a></li>
<li><a href='LINK DO VIMEO' target='_blank'><span class='fa fa-vimeo-square'/></a></li>
<li><a href='LINK DO TUMBLR' target='_blank'><span class='fa fa-tumblr'/></a></li>
</ul>
</div>
</div>

</div>
</div>


Substitua tudo de acordo com o que se pede. No "LINK DA SUA PÁGINA" você irá substituir pelo link da sua página estática. Se você não sabe como fazer uma página estática, veja esse tutorial.

E ficará assim:


Agora clique em Ctrl + F novamente e procure por ]]></b:skin> achou? Então cole o código abaixo ACIMA dele e personalize da maneira que preferir. Se você não entende muito css, sugiro que mude apenas as cores e tamanhos para se adequar no seu blog e ficar do jeito que combine com seu blog.

    /* MENU FIXO
    ------------------------------------------------------------ */
    .top_header {
        background-color: #222; /*cor do fundo da barra */
        position: fixed; /* mude fixed para absolute não quiser fixo*/
        top: 0;
        z-index: 99999;
        left: 0;
        right: 0;
    }
    .ct-wrapper {
        padding: 0px 15px;
        position: relative;
        max-width: 1100px;
        margin: 0 auto;
    }
    .nav-menu {
        padding: 0;
        width: auto;
        display: block;
        position: relative;
        margin-top: 0;
        z-index: 100;
        float: left;
    }
    .nav-menu ul {
        list-style: none;
        padding: 0px;
        margin: 0;
        z-index: 1;
        display: table;
        width: auto;
    }
    .nav-menu ul li {
        display: inline-block;
        float: left;
        position: relative;
        padding: 0px;
        margin: 0px;
        z-index: 1;
        list-style: none;
        font-size: 16px;
        margin-right: 30px;
        -moz-transition: background-color 400ms ease, border 200ms ease-out;
        -o-transition: background-color 400ms ease, border 200ms ease-out;
        -webkit-transition: background-color 400ms ease, border 200ms ease-out;
        transition: background-color 400ms ease, border 200ms ease-out;
    }
    .nav-menu li a {
        color: #fff;
        display: block;
        z-index: 10;
        color: #B3B3B3;
        font-size: 11px;
        font-weight: 500;
        line-height: 24px;
        padding: 12px 1px;
        letter-spacing: 0;
        text-transform: uppercase;
        font-family: montserrat, sans-serif;
        -moz-transition: border 300ms ease 0s , color 300ms ease 0s;
        -o-transition: border 300ms ease 0s , color 300ms ease 0s;
        -webkit-transition: border 300ms ease 0s , color 300ms ease 0s;
        transition: border 300ms ease 0s , color 300ms ease 0s;
        text-decoration: none;
    }
    ul li {
        list-style-type: square;
    }
    .nav-menu li a:hover, .nav-menu li a.current, .nav-menu li:first-child a {
        color: #fff; /*cor do link quando passa o mouse*/
    }

    /* barra de redes
    --------------------- */
    .social-wrap.left {
    }
    .left {
        float: left;
    }
    ul.dslc-social {
        list-style-type: none;
        font-size: 0;
    }
    ul.dslc-social {
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 0;
    }
    ul.dslc-social li {
        line-height: 1;
    }
    ul.dslc-social li {
        margin: 5px 10px 0 0;
        padding: 0;
        line-height: 1;
        display: inline-block;
    }
    ul li {
        list-style-type: square;
    }
    ul.dslc-social a {
        font-size: 12px;
        color: rgb(119, 119, 119); /* cor dos icones das redes sociais */
    }
    ul.dslc-social a:hover {
        color: #eee; /* cor dos icones das redes sociais quando passa o mouse */
    }

    /* BARRA DE PESQUISA
    ---------------------------- */
    .social_search {
        margin-top: 12px;
    }
    .right {
        float: right;
    }
    .search-form-wrapper {
        position: relative;
        border-left: 1px solid rgba( 255, 255, 255, 0.1 );
        padding-left: 30px;
    }
    .search-form-wrapper {
        border-left-color: rgba( 255, 255, 255, 0.1 );
    }
    .search-form-wrapper input[type="text"] {
        display: block;
        width: 100%;
        background: transparent;
        border: 0;
        outline: 0;
    }
    .search-form-wrapper input[type="text"] {
        color: rgb(145, 145, 145); /*cor do texto da barra de pesquisa */
        font-size: 11px;
        font-weight: 400;
        font-family: Montserrat;
        line-height: 22px;
        text-transform: none;
    }
    .search-form-icon {
        color: rgba(255, 255, 255, 0.65); /* cor da lupa da barra de pesquisa */
        font-size: 10px;
        top: 0px;
        right: -3px;
        position: absolute;
    }

    OBS: O código das redes sociais não apareceu? 

    Caso os icones das redes sociais não tenha aparecido, cole o seguinte código ABAIXO de <head> no HTML no seu blog e salve.
    <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

    Pronto! Muito fácil, né? Qualquer dúvida ou erro fale aqui nos comentários 😊
    Se você deseja algum tutorial é só pedir. Espero que tenham gostado ❤

    35 comentários:

    1. Olá Alexia! *o*
      Primeira vez que visito o seu blog e me apaixonei! To xonada pelo layout que você fez <3
      Visitei o teu portfólio e quero te parabenizar pelos layout lindos que tu faz :)

      Ainda penso em colocar redes sociais no topo do meu blog, mas só estou pensando mesmo kkk'

      ResponderExcluir
      Respostas
      1. Olá Thamíris, muito obrigada pelo elogio, saber disso é muito importante pra mim *-* Acho bem legal colocar as redes sociais no topo ou pelo menos no "perfil", assim, quem gosta do seu conteúdo pode te seguir e ficar mais próximo de você.
        Volte mais vezes aqui, beijos!

        Excluir
    2. Me ajudou muito, ficou perfeito!

      ResponderExcluir
      Respostas
      1. Porem as redes sociais não aparecem, tu errou em alguma coisa no código que eu não consigo descobrir o que é, já olhei e não acho o problema :(

        Excluir
      2. Olá Jamilson, fico feliz que o tutorial te ajudou :) Sobre o erro, creio que seu blog não tenha a font awesome, para colocá-la basta seguir a observação que coloquei no final do post.

        Excluir
    3. OII amei o layout estou até começando a usar ele , porém queria saber como editar a categorias e o Titulo do blog com essa fonte que vem nele.. fiquei louca nessa parte e não soube arrumar !

      ResponderExcluir
      Respostas
      1. Olá Bell, as categorias em imagens já vem pré definidas, se você quiser mudar terá que criar uma imagem e upar em um site de sua preferência, eu não recomendo fazer isso porque eu já coloquei tudo bem armônico para combinar com o layout, mas se você quiser mudar, eu recomendo que você vá em "Editar HTML" e pesquise por "Outras Categorias" abaixo disso você verá as categorias que estão disponíveis, então você pode adicionar mais ou simplesmente substituir alguma que não goste. Já para o título, junto com o download do layout vem uma fonte que se chama "Pale Blue Eyes", você terá que instalá-la e criar o nome do seu blog em png no photoshop ou programa online. Qualquer dúvida me mande um e-mail no endereço disponível aqui na página "contado" do blog que posso te enviar um tutorial respondendo suas dúvidas. Espero ter ajudado :) Beijos e obrigada pela visita.

        Excluir
      2. Obrigado me ajudou muito <3

        Excluir
    4. Este comentário foi removido pelo autor.

      ResponderExcluir
    5. Oi, querida! Como vai?

      Acabei de conhecer seu blog, e eu AMEI aqui! O menu ficou maravilhoso, o mais bonito que encontrei! Parabéns, seu cantinho é lindo!

      Beijão

      ResponderExcluir
      Respostas
      1. Olá Natália, estou ótima e você?
        Fico muito feliz que gostou do meu blog :) Mande o link do seu blog, vou adorar ver o resultado! Beijos

        Excluir
    6. Oi linda amei o menu tá lindo , ensina a fazer esse menu aqui pra nós porfavor >> http://konkeblog.com/

      ResponderExcluir
      Respostas
      1. Assim que pudar eu posso ensinar um semelhante, não posso ensinar um idêntico. Obrigada pela visita!

        Excluir
    7. Oiii!! Amei seu tutorial, super bem explicado. Parabéns!
      Estou começando e nao sou mto boa nisso.
      Fiquei só com dúvida em uma coisinha, tenho uma conta no instagram, tem como inserir este link tb? Como faço?
      Fico no aguardo e já agradeço por tudo! Bjos

      ResponderExcluir
      Respostas
      1. Abaixo de ul class='dslc-social' adicione um li> span class='fa fa-instagram'/>/li

        OBSERVAÇÃO: antes de "ul" tem esse sinal <
        antes de "li" tem esse < e depois de "li" tem esse >
        antes de "span" tem esse <
        (não pude colocar o codigo certinho aqui nos comentários pois da erro. Caso não tenha entendido envie-me um e-mail.
        e pronto! Obrigada pela visita, beijos :)

        Excluir
    8. Oi, tentei fazer aqui mas não pegou. A barra não aparece e os ícones ficam na vertical, você pode me ajudar?

      ResponderExcluir
      Respostas
      1. Você pode me mandar o link do blog que você testou para eu ver qual o problema?

        Excluir
      2. Acontece a mesma coisa no meu.

        Excluir
      3. Testei nesse blog http://sorrisodeumaleitora.blogspot.com.br/

        Excluir
    9. Oi! Adorei o tutorial! Estou criando meu layout e este menu está lá <3
      Só uma pequena dúvida, eu não queria o menu responsivo, o que eu faço?
      Obrigada ♥♥

      ResponderExcluir
      Respostas
      1. Que bom que gostou :) Este tutorial não é responsivo, então pode fazer tranquila. Obrigada pela visita!

        Excluir
    10. Oii, tudo bem? Amei o Tutorial! Deu super certo, porém eu gostaria de colocar as Páginas (inicio, contato, sobre, etc.) centralizadas ou mais perto das redes sociais. Eu tentei usar o "center" ou o "rigth" mas não funciona, o que eu faço ? Agradeço desde já!

      ResponderExcluir
      Respostas
      1. Que bom que gostou :) Pesquise por " .nav-menu { " e coloque um " left: 193px; " aqui deu certo assim, tente colocar ai, caso não dê certo me avise

        Excluir
    11. Evellyn, boa noite! Gostei bastante do menu das redes sociaiS. Quando coloquei no blog de teste deu certo, quando coloquei no meu blog não funcionou. Você pode me ajudar?
      LINK DO BLOG: http://pastordeuramar.blogspot.com.br/

      ResponderExcluir
    12. BLOG DE TESTE: http://testedeuramar.blogspot.com.br/

      ResponderExcluir
    13. Olá! Adorei o post deu certo no meu! Só queria fazer um submenu dentro de um dos ícones do menu. Poderia me ajudar por favor? Obrigada!

      ResponderExcluir
    14. Muuuuitoo obrigada!! ficou incrível e quase do jeitinho que quero XD
      Se vc puder me ajudar em como o deixar centralizado eu iria amar. :3
      Grata.

      sounerd.blogspot.com

      ResponderExcluir
      Respostas
      1. Pesquise por ".nav-menu" e adiocione um "margin-left: 0px" onde está o 0px você ajusta para o número que deixa as palavras centralizadas. Espero ter ajudado :*

        Excluir
    15. Ameiii demais o tutorial estava procurando por um menu assim
      Gostei do blogue e já te sigo

      Visite o blog e nos siga por favor
      https://coisasdecrespasoficial.blogspot.com/2018/01/contominhahistoria-2.html

      ResponderExcluir
    16. Oie gostei bastante desse tutorial,além disso já faço uso em meu blog! Gostaria de saber se dá pra deixar ele responsivo? Help! Aguardo retorno. Bjos <3

      Faça-me uma visita -> LEH BLOG | INSTAGRAM

      ResponderExcluir
    17. Olá Alexia, o seu blog é lindo e original.
      Preciso de uma orientação a sobre esse menu. Como eu adiciono um submenu?
      Nesta versão é possível e que código eu acrescento ali?

      Aguardo sua orientação.

      ResponderExcluir
    18. Olá!
      Não estou conseguindo mudar a cor do texto do "digite e dê enter"
      me ajuda, pfvr??

      ResponderExcluir
    19. Parabéns pelo blog e obrigado por compartilhar dicas para melhorar o nosso blog! Gostaria de saber se tem como acrescentar mais ícones das redes sociais ou trocar por outras?

      ResponderExcluir
    20. Muito bom parabéns o meu só nao apareceu o de pesquisar
      mas ficou otimo

      ResponderExcluir
    21. Oie. Como deixar o menu responsivo para dispositivos móveis? O menu fica bem pequeno, queria que ele ficasse responsivo para versão mobile também, sem que a pessoa tenha que aumentar com os dedos a tela ou girar para ler. Gratidão.

      ResponderExcluir