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!
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.
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 ❤
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'>
<!-- 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>
<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;
}
------------------------------------------------------------ */
.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 ❤
Nenhum comentário:
Postar um comentário
Obrigado por comentar!