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
<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
FONTE: https://pronto-postei.blogspot.com/2016/10/menu-no-topo-com-redes-sociais-e-barra.html
