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.
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.
Nenhum comentário:
Postar um comentário
Você leu um artigo escrito com grande dedicação. Gostou? !
Comente, críticas e sugestões, são importantes para o desenvolvimento do Blog.
Sua mensagem será respondida o mais rápido possível.
Obrigado pela visita, volte sempre. Inscreva-se e receba novidades.