16 de abril de 2014

como personalizar o menu padrão do blog

Hi Amorecos! Depois do sumiço -vocês até já se acostumaram com a falta de posts que eu sei rss, trouxe um tutorial bem pedido: como personalizar o menu padrão do blog (aquele horroroso!) e é bem simples, sério! Não vi esse tutorial em nenhum outro blog, descobri  fuçando  e vim compartilhar com vocês.

O resultado será semelhante ao meu:

Como fazer:

Entre no seu html clique em algum lugar do código e aperte ctrl+F e procure por , abaixo você encontrará algo parecido a isso:


/* 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);
}

Feito isso, substitua todo esse código por esse aqui:


/* Menu do blogger personalizado
----------------------------------------------- */
.tabs-inner {
margin: 1em 0 0;
padding: 0;
margin-top: 0px; /*para subir ou descer o menu troque o número*/
margin-left: 0px; /*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: $(tabs.font); /*fonte*/
border-radius: 50px; /*bordas arredondadas, apague a linha se n quiser*/
line-height: 5px;
padding: 12px;
background: #BFCED5; /*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*/
}

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



Em font se você manter como está no código a fonte será aquela que você estabeleceu -ou que veio com o template- no designer do modelo, mas você pode mudar colocando o nome da fonte que preferir, assim: font: nome da fonte (ex: font: calibri;)


 Após seguir o tutorial você deve adicionar ao seu template (caso ainda não o tenha) o gadget Páginas disponibilizado pelo próprio Blogger. Pra adiciona-lo vá em layout > adicionar um gadget > páginas


Testado somente no template TRAVEL!

Faça as alterações necessárias, visualize e se curtir salve, caso não goste é só deletar as alterações feitas!

Gostou? Compartilhe!
  • Facebook
  • Tweet this
  • Google Buzz

Comente com o Facebook:

6 comentários:

 
Veja os últimos posts

Design e programação: Carol Mascarenhas
Aline Indecisa - COPYRIGHT © 2015 TODOS OS DIREITOS RESERVADOS