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>
<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 ❤
Olá Alexia! *o*
ResponderExcluirPrimeira vez que visito o seu blog e me apaixonei! To xonada pelo layout que você fez <3
Visitei o teu portfólio e quero te parabenizar pelos layout lindos que tu faz :)
Ainda penso em colocar redes sociais no topo do meu blog, mas só estou pensando mesmo kkk'
Olá Thamíris, muito obrigada pelo elogio, saber disso é muito importante pra mim *-* Acho bem legal colocar as redes sociais no topo ou pelo menos no "perfil", assim, quem gosta do seu conteúdo pode te seguir e ficar mais próximo de você.
ExcluirVolte mais vezes aqui, beijos!
Me ajudou muito, ficou perfeito!
ResponderExcluirPorem as redes sociais não aparecem, tu errou em alguma coisa no código que eu não consigo descobrir o que é, já olhei e não acho o problema :(
ExcluirOlá Jamilson, fico feliz que o tutorial te ajudou :) Sobre o erro, creio que seu blog não tenha a font awesome, para colocá-la basta seguir a observação que coloquei no final do post.
ExcluirOII amei o layout estou até começando a usar ele , porém queria saber como editar a categorias e o Titulo do blog com essa fonte que vem nele.. fiquei louca nessa parte e não soube arrumar !
ResponderExcluirOlá Bell, as categorias em imagens já vem pré definidas, se você quiser mudar terá que criar uma imagem e upar em um site de sua preferência, eu não recomendo fazer isso porque eu já coloquei tudo bem armônico para combinar com o layout, mas se você quiser mudar, eu recomendo que você vá em "Editar HTML" e pesquise por "Outras Categorias" abaixo disso você verá as categorias que estão disponíveis, então você pode adicionar mais ou simplesmente substituir alguma que não goste. Já para o título, junto com o download do layout vem uma fonte que se chama "Pale Blue Eyes", você terá que instalá-la e criar o nome do seu blog em png no photoshop ou programa online. Qualquer dúvida me mande um e-mail no endereço disponível aqui na página "contado" do blog que posso te enviar um tutorial respondendo suas dúvidas. Espero ter ajudado :) Beijos e obrigada pela visita.
ExcluirObrigado me ajudou muito <3
ExcluirEste comentário foi removido pelo autor.
ResponderExcluirOi, querida! Como vai?
ResponderExcluirAcabei de conhecer seu blog, e eu AMEI aqui! O menu ficou maravilhoso, o mais bonito que encontrei! Parabéns, seu cantinho é lindo!
Beijão
Olá Natália, estou ótima e você?
ExcluirFico muito feliz que gostou do meu blog :) Mande o link do seu blog, vou adorar ver o resultado! Beijos
Oi linda amei o menu tá lindo , ensina a fazer esse menu aqui pra nós porfavor >> http://konkeblog.com/
ResponderExcluirAssim que pudar eu posso ensinar um semelhante, não posso ensinar um idêntico. Obrigada pela visita!
ExcluirOiii!! Amei seu tutorial, super bem explicado. Parabéns!
ResponderExcluirEstou começando e nao sou mto boa nisso.
Fiquei só com dúvida em uma coisinha, tenho uma conta no instagram, tem como inserir este link tb? Como faço?
Fico no aguardo e já agradeço por tudo! Bjos
Abaixo de ul class='dslc-social' adicione um li> span class='fa fa-instagram'/>/li
ExcluirOBSERVAÇÃO: antes de "ul" tem esse sinal <
antes de "li" tem esse < e depois de "li" tem esse >
antes de "span" tem esse <
(não pude colocar o codigo certinho aqui nos comentários pois da erro. Caso não tenha entendido envie-me um e-mail.
e pronto! Obrigada pela visita, beijos :)
Oi, tentei fazer aqui mas não pegou. A barra não aparece e os ícones ficam na vertical, você pode me ajudar?
ResponderExcluirVocê pode me mandar o link do blog que você testou para eu ver qual o problema?
ExcluirAcontece a mesma coisa no meu.
ExcluirTestei nesse blog http://sorrisodeumaleitora.blogspot.com.br/
ExcluirOi! Adorei o tutorial! Estou criando meu layout e este menu está lá <3
ResponderExcluirSó uma pequena dúvida, eu não queria o menu responsivo, o que eu faço?
Obrigada ♥♥
Que bom que gostou :) Este tutorial não é responsivo, então pode fazer tranquila. Obrigada pela visita!
ExcluirOii, tudo bem? Amei o Tutorial! Deu super certo, porém eu gostaria de colocar as Páginas (inicio, contato, sobre, etc.) centralizadas ou mais perto das redes sociais. Eu tentei usar o "center" ou o "rigth" mas não funciona, o que eu faço ? Agradeço desde já!
ResponderExcluirQue bom que gostou :) Pesquise por " .nav-menu { " e coloque um " left: 193px; " aqui deu certo assim, tente colocar ai, caso não dê certo me avise
ExcluirEvellyn, boa noite! Gostei bastante do menu das redes sociaiS. Quando coloquei no blog de teste deu certo, quando coloquei no meu blog não funcionou. Você pode me ajudar?
ResponderExcluirLINK DO BLOG: http://pastordeuramar.blogspot.com.br/
BLOG DE TESTE: http://testedeuramar.blogspot.com.br/
ResponderExcluirOlá! Adorei o post deu certo no meu! Só queria fazer um submenu dentro de um dos ícones do menu. Poderia me ajudar por favor? Obrigada!
ResponderExcluirMuuuuitoo obrigada!! ficou incrível e quase do jeitinho que quero XD
ResponderExcluirSe vc puder me ajudar em como o deixar centralizado eu iria amar. :3
Grata.
sounerd.blogspot.com
Pesquise por ".nav-menu" e adiocione um "margin-left: 0px" onde está o 0px você ajusta para o número que deixa as palavras centralizadas. Espero ter ajudado :*
ExcluirAmeiii demais o tutorial estava procurando por um menu assim
ResponderExcluirGostei do blogue e já te sigo
Visite o blog e nos siga por favor
https://coisasdecrespasoficial.blogspot.com/2018/01/contominhahistoria-2.html
Oie gostei bastante desse tutorial,além disso já faço uso em meu blog! Gostaria de saber se dá pra deixar ele responsivo? Help! Aguardo retorno. Bjos <3
ResponderExcluirFaça-me uma visita -> LEH BLOG | INSTAGRAM
Olá Alexia, o seu blog é lindo e original.
ResponderExcluirPreciso de uma orientação a sobre esse menu. Como eu adiciono um submenu?
Nesta versão é possível e que código eu acrescento ali?
Aguardo sua orientação.
Olá!
ResponderExcluirNão estou conseguindo mudar a cor do texto do "digite e dê enter"
me ajuda, pfvr??
Parabéns pelo blog e obrigado por compartilhar dicas para melhorar o nosso blog! Gostaria de saber se tem como acrescentar mais ícones das redes sociais ou trocar por outras?
ResponderExcluirMuito bom parabéns o meu só nao apareceu o de pesquisar
ResponderExcluirmas ficou otimo
Oie. Como deixar o menu responsivo para dispositivos móveis? O menu fica bem pequeno, queria que ele ficasse responsivo para versão mobile também, sem que a pessoa tenha que aumentar com os dedos a tela ou girar para ler. Gratidão.
ResponderExcluir