30 março 2020

Dois estilos para personalizar o menu

🗨
Olá  amigos leitores .
Hoje venho trazendo um dos tutoriais que talvez esteja entre um dos mais procurados nas personalizações para blogs.
Vou ensinar vocês a  personalizar de duas formas o menu nativo do blogger e deixa-lo combinando com seu layout .
Borá lá.



menu nativo do blogger personalizado



 Dois Estilos para Personalizar o Menu






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


Antes de mais nada instale o gadget páginas e as páginas estáticas do seu blog.


Primeiro faça um backup do seu blog antes de mexer nos códigos , caso algo de errado será possível restaurar .
Feito então vamos abrir editar HTML de um CTRL + F  e digite   ]]></b:skin>  dentro dessa parte 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 .


Ufa terminou é isso por hoje espero que gostem , qualquer dúvida deixe nos comentários abaixo se quiser pedir um tutorial também que assim que for possível atenderei .
Não se esqueça usou  reblogou de os créditos .
 Até a próxima.

Depositphotos [CPS] WW

Nenhum comentário:

Postar um comentário

Você leu uma postagem escrita com muito amor por mim Adriana autora do Baú da Dri. Gostou?! Deixe seu comentário, criticas e sugestões, elas são muito importantes para o blog crescer e melhorar. Curta, compartilhe, ajude o blog a crescer.
Sua mensagem será respondida o mais breve possível .
Muito obrigada pela visita e volte sempre.

Atualizações do Instagram