Personalizar Menu padrão do Blogger


Uma das coisas mais feias do blogger, sem dúvidas, é o menu. Vamos personalizar e dar um toque chic ao nosso blog? 
 Faça sempre backup do seu template antes de modificá-lo , ou tenha um                               blog de testes, caso algo dê algo errado.


Vá em Modelo => Editar HTML




Na página que abriu aperte Ctrl+F, 

Procure por /* Tabs

Deve estar mais ou menos assim:


/* Tabs----------------------------------------------- */.tabs-inner {margin: 1em 0 0;padding: 0;}.tabs-inner .section {margin: 0;}.tabs-inner .widget ul {padding: 0;background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;}.tabs-inner .widget li {border: none;}.tabs-inner .widget li a {display: inline-block;padding: 1em 1.5em;color: $(tabs.text.color);font: $(tabs.font);}.tabs-inner .widget li.selected a,.tabs-inner .widget li a:hover {position: relative;z-index: 1;background: $(tabs.selected.background.color) $(tabs.selected.background.gradient) repeat scroll top center;color: $(tabs.selected.text.color);}

Substitua todo esse código por esse:


/* Menu do blogger personalizado----------------------------------------------- */.tabs-inner {margin: 1em 0 0;padding: 0;margin-top: 400px; /*para subir ou descer o menu troque o número*/margin-left: 20px; /*para afastar o menu para esquerda ou direita troque o número*/}.tabs-inner .section {margin: 0;}.tabs-inner .widget ul {padding: 0;background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;}.tabs-inner .widget li {border: none;}/*Estado normal do menu*/.tabs-inner .widget li a {display: inline-block;padding: 1em 1.5em;color: #fff; /*cor da fonte*/font-family: Dosis; /*fonte*/font-size: 20px;border-radius: 50px; /*bordas arredondadas, apague a linha se n quiser*/line-height: 5px;padding: 15px;background: url(URL DO BACKGROUND) repeat; /*cor do fundo normal*/margin-left: 8px; /*espaço entre os botões*/}/*Estado hover e selecionado*/.tabs-inner .widget li.selected a,.tabs-inner .widget li a:hover {position: relative;z-index: 1;background: #8BC2C9; /*cor do fundo hover/selecionado*/color: #fff; /*cor da fonte*/border-radius: 50px; /*bordas arredondadas, apague a linha se n quiser*/line-height: 5px;padding: 12px; /*espaçamento interno*/}


Onde está URL DO BACKGROUND, coloque o url de uma imagem para ser o plano de fundo do menu.

*** Lembre-se

margin-top números positivos descem e negativos sobem.
margin-left números negativos vão para esquerda e positivos para a direita.


Testado em template Travel!!

O tutorial original é do:  Go Imagine
Personalizado por : Natália Médice

Nenhum comentário:

Postar um comentário