2 Estilos de personalização do menu nativo Blogger, fácil e simples

By Adriana Bentim em 19/10/2021

Tempo de leitura:

 

Quem cria um blog no Blogger, e ainda está sem poder comprar um tema recheado de personalizações e recursos, e deseja deixar seu tema limpo, leve e fácil para navegação do usuário.

Vou ensinar vocês a  personalizar de duas formas o menu nativo do blogger, fácil e simples de aplicar e deixa-lo combinando com seu layout.

Borá lá, conferir o tutorial!

Primeira coisa antes de dar início a personalização é fazer um backup do seu template, caso algo de errado você pode voltar ao que estava antes.

Se você tiver um "blog de teste" é o preferencial, execute o tutorial nele primeiro.

O primeiro estilo para personalizar  ele ficará em caixas abaixo do cabeçalho, vamos lé então.

Demonstração do tutorial

Primeiro instale o gadget páginas e as páginas estáticas do seu blog, que você deseja que apareça.

Agora vamos abrir a aba editar HTML de um CTRL + F  e digite   ]]></b:skin>  dentro dessa parte, (vai aparecer uma barra de pesquisa), onde ficam as personalizações do blog procure por esse código que está abaixo:

/* Tabs----------------------------------------------- */.tabs-inner .section {  margin: 0 20px;}.tabs-inner .PageList, .tabs-inner .LinkList, .tabs-inner .Labels {  margin-left: -11px;  margin-right: -11px;  background-color: $(tabs.background.color);  border-top: $(tabs.border.size) solid #ffffff;  border-bottom: $(tabs.border.size) solid #ffffff;  -moz-box-shadow: 0 0 $(tabs.shadow.spread) rgba(0, 0, 0, .3);  -webkit-box-shadow: 0 0 $(tabs.shadow.spread) rgba(0, 0, 0, .3);  -goog-ms-box-shadow: 0 0 $(tabs.shadow.spread) rgba(0, 0, 0, .3);  box-shadow: 0 0 $(tabs.shadow.spread) rgba(0, 0, 0, .3);}.tabs-inner .PageList .widget-content,.tabs-inner .LinkList .widget-content,.tabs-inner .Labels .widget-content {  margin: -3px -11px;  background: transparent $(tabs.background.outer)  no-repeat scroll right;}.tabs-inner .widget ul {  padding: 2px 25px;  max-height: 34px;  background: transparent $(tabs.background.inner) no-repeat scroll left;}.tabs-inner .widget li {  border: none;}.tabs-inner .widget li a {  display: inline-block;  padding: .25em 1em;  font: $(tabs.font);  color: $(tabs.text.color);  border-$endSide: 1px solid $(tabs.separator.color);}.tabs-inner .widget li:first-child a {  border-$startSide: 1px solid $(tabs.separator.color);}.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {  color: $(tabs.selected.text.color);}

        Apague toda essa parte do código  até:

• /*Headings--------------------*/

       Agora substitua essa parte pelo código abaixo: 

/*Tabs - Menu Personalizado em Caixas----------------------------------------------------------*/.tabs-inner .section {margin: 0;margin-top: 36px; margin-left: 46px; }.tabs-inner .widget ul {padding: 4px;}.tabs-inner .widget li {border: none;}/*Menu Normal*/.tabs-inner .widget li a {display: inline-block;padding: 1em 1.5em;color: #fff; /*cor da fonte*/font: $(tabs.font); /*fonte*/border:groove 2px; /*bordas entalhadas*/line-height: 5px;padding: 14px;background: #e4aa72; /*cor do fundo */margin-left: 8px; /*espaço entre os botões*/}/*Menu em hover */.tabs-inner .widget li.selected a,.tabs-inner .widget li a:hover {position: relative;z-index: 2;background: #ffcaaf; /*cor do fundo em hover*/color: #fff; /*cor da fonte*/border:grouve 2px; /*bordas entalhadas*/line-height: 5px;padding: 14px; /*espaçamento interno*/}

Confira em visualizar tema e estando tudo certo salve, agora preste atenção em todos os caracteres para não apagar nenhum e confira a lista abaixo do que você pode mudar.

Margin-top: 36px;  se você desejar que o menu fique mais próximo do cabeçalho diminua o numero.
Margin-left:46px;  se você deseja o menu mais para esquerda diminua o px mais para o centro aumente.
Mude as cores em backgroud e a cor da fonte em color, você também pode alterar as bordas se desejar.

Consulte aqui na tabela de cores e escolha uma que combine com o seu blog, Paleta de Cores.

Para escolher bordas de uma olhada Códigos Html e CSS fáceis para você aprender.


Agora vamos ao segundo estilo de Menu esse é acima do cabeçalho.

/* Tabs ----------------------------------------------- */ .PageList { text-align:center; margin: 10px 12px 4px 0px; padding: 18px 10px 18px 10px; letter-spacing:0.4em; position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;background:#ffefd5; } .PageList li { display:inline ; float:none !important; padding: 0px 0px 0px 0px; margin: 3px 0px 3px 0px; text-tranform:capitalize;/* Tabs----------------------------------------------- *//* Menu Acima do Cabeçalho ----------------------------------------------- */ .PageList { text-align:center ; margin: 10px 12px 4px 0px; padding: 20px 10px 20px 10px; letter-spacing:0.2em; position: fixed; top: 0px; left: 0px; z-index: 999; width:100%; background:#ebadd6; } .PageList li { display:inline !important; float:none !important; padding: 0px 0px 0px 0px; margin: 3px 0px 3px 0px; text-decoration:none; font: $(tabs.font); text-transform:capitalize; color:#c0c0c0; } .PageList li a, .PageList li a font: $(tabs.font); text-transform:none; color:#e4aa72; }.PageList li a, .PageList li a:visited, PageList li a:hover { text-transform:Capitalize; text-decoration:none; padding: 0px 0px 0px 0px; margin: 0px 15px 0px 25px; color:#804215; } .PageList li a:hover { margin: 10px 12px 4px 0px; padding: 20px 10px 20px 10px; letter-spacing:0.4em; color:#000000; position: fixed; top: 0px; left: 0px; z-index: 999; width:100%; background:#fffafc; }

Siga as mesmas regras de instalação do primeiro código e para alterar fontes e cores a mesma coisa.

Terminou é isso por hoje, simples e fácil.

Espero que gostem, qualquer dúvida ou  tutorial específico que deseje, deixe nos comentários abaixo, assim que for possível atenderei.

Não esqueça de dar os devidos créditos, caso refaça a postagem.

CURTA, COMENTE, COMPARTILHE!