Beleza Nerd

Oláá! tudo bem com vocês? eu espero que sim! resolvi voltar com tutoriais de HTML já não existem mais tantos blogs relacionados a isso, e tutoriais sempre fez parte do que o blog é. Hoje vou ensinar como colocar no blog um menu fixo no topo e reponsivo. Ele é uma mistura de alguns códigos que encontrei na internet e eu acabei "montando" com base outro menu que já tinha postado aqui.

Veja: Menu fixo no topo do blog com opacidade

Esse é o resultado do menu

É um menu simples, praticamente apenas CSS, mas mesmo assim para garantir faça um backup do seu layout antes, caso algo dê errado você não "destrói" seu blog. Aprenda aqui.

Vamos começar!

1 - Com o painel do blogger aberto >> Tema >> Clique em editar HTML >> clique dentro do código e digita ctrl + f irá abrir uma caixa de pesquisa nela pesquise por }]]></b:skin> ou dependendo do seu layout por <style> e ACIMA dele cole o código modificando nas indicações

/* ------------------------------------
MENU FIXO NO TOPO REPONSIVO BELEZA NERD
--------------------------------------*/
body {
margin: 0px;
}
#menureponsivo{
background:#fff url()center repeat-x; /*Cor de fundo do menu*/
border-bottom: 6px solid #502281; /*Borda do Menu*/
height: 40px; /*Largura do Menu*/
z-index:999;
position:fixed;
width:100%;
top:0;
}
#menureponsivo ul,#menureponsivo li{margin:0 auto;padding:0 0;list-style:none}
#menureponsivo ul{height:45px;width:980px}
#menureponsivo li{float:left;display:inline;position:relative;
font-weight:200;
font-family: font-family: 'Raleway', sans-serif; /*Fonte dos Links do Menu*/
font-size:16px;} /*Tamanho da Fonte*/

#menureponsivo a{display: block;
line-height: 40px;
padding: 0 74px;
text-decoration: none;
color:#000;} /*Cor dos Links do Menu*/
#menureponsivo li a:hover{
color:#000;/*Cor dos Links do Menu quando passa o mouse*/
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menureponsivo input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menureponsivo label{font:normal 18px georgia;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menureponsivo label span{font-size:16px;position:absolute;left:35px}
#menureponsivo ul.menureponsivos{
height: auto;
overflow: hidden;
width: 170px;
background: #000;
position: absolute;
z-index: 99;
display: none;
}
#menureponsivo ul.menus li{
display: block;
width: 100%;
font:normal 0.8em georgia;
text-transform: none;
text-shadow: none;
border-bottom: 1px dashed #FFF;
}
#menu ul.menureponsivos a{
color: #FFF;
line-height: 35px;
}
#menureponsivo li:hover ul.menureponsivos{display:block}
#menureponsivo ul.menureponsivos a:hover{
background:#FFF;
color: #000;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
@media screen and (max-width: 800px){
#menureponsivo{position:relative; background:#FFF!important;}
#menureponsivo ul{background:#ccc;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menureponsivo ul.menureponsivos {width:100%;position:static;padding-left:20px}
#menureponsivo li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
#menureponsivo input,#menureponsivo label{position:absolute;top:0;left:0;display:block}
#menureponsivo input{z-index:4}
#menureponsivo input:checked + label{color:white}
#menureponsivo input:checked ~ ul{display:block}
}

Salve

Todas as partes que você pode editar estão marcado com o fundo rosa e no próprio código tem a explicação.

2 - Ainda no painel pesquise por <body ou <body> e ABAIXO dele cole o código

<nav id='menureponsivo'><ul><li><a href='LINK DO SEU BLOG><i aria-hidden='true' class='fa fa-home'/> HOME</a></li><li><a href='LINK>TITULO DA PAGINA</a></li><li><a href='LINK'> TITULO DA PAGINA</a><li><a href=LINK'>TITULO DA PAGINA</a></li></li></ul></nav>

3 - Se quiser adicionar mais links antes da quebra </ul> adicione quantos desse código desejar <li><a href='LINK>TITULO DA PAGINA</a></li>

Seu menu está pronto! eu falei que era fácil. Se quiser usar a mesma fonte que eu usei abra o HTML novamente procure por <head> e Acima cole esse código. Salve