Menu no topo do blog com redes sociais e caixa de pesquisa

Curta, e siga-nos!:

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 disponíveis  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 ❤

      CRÉDITOS DE… MAIS A RESPEITO…


      Author: admin

      Deixe uma resposta