♡ Personalizando o menu do blog ♡

by Marcela Kemmely - 28.7.15

Oi meninas, hoje eu vim aqui para ensinar um tutorial bem rapidinho. Vou mostrar como personalizar o menu padrão do blog. Esse tutorial é do Go Imagine,Vamos lá:

Entre no seu html aperte Ctrl+F e procure por isso ]]></b:skin> e acima dele cole o seguinte código:

/* Menu do blogger personalizado by Go Imagine - goimagines.blogspot.com ----------------------------------------------- */ .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.

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.

Bye Bye❤

Compartilhe