RPA Informação: Menu no topo do blog com redes sociais e caixa de pesquisa

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


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

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

Propaganda do topo

29 novembro 2017

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

MENU NO TOPO COM REDES SOCIAIS E BARRA DE PESQUISA

QUER APRENDER COMO FAZER O MENU? ENTÃO SEGUE O TUTORIAL!

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

Nenhum comentário:

Postar um comentário

Postagem em destaque

Plebiscito Popular leva 1,5 milhão de assinaturas a Lula

Super Ofertas!!!

Estatísticas

Total de visualizações de página

Privacidade

Denunciar abuso

Marcadores