Menu no topo com redes sociais e barra de pesquisa

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!

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

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

</form> <span class='search-form-icon'><span class='fa fa-search'/></span> </div> </div> <div class='social-wrap left'> <ul class='dslc-social'>

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

}