Oi minha gente tudo bom?

Bem, vamos continuar a fazer e personalizar nosso lay?



1 - Vá em Modelo>Editar html CTRL + F  e procurar por /* Tabs

2 - Então vai aparecer todo o código da Tabs que começa depois de */tabs e termina quando fecha ( } ) começando outro código ( /*)

3 - Você vai apagar todo código de dentro de*/tabs e colocar esse no lugar:

/* Menu do blogger personalizado by Quital das Flores - www.quintaldasflores.com----------------------------------------------- */ .tabs-inner {margin: 1em 0 0;padding: 0;margin-top: 0px;

/*TROQUE ESTE NUMERO PARA SUBIR OU DESCER*/margin-left: 0px; /*PARA AFASTAR PARA DIREITA E ESQUERDA TROQUE ESTE NUMERO*/}

.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;}

/*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; /*APAGUE SE NAO QUISER AS BORDAS ARREDONDADAS*/line-height: 5px;padding: 12px;background: #BFCED5; /*COR DO FUNDO DO MENU*/margin-left: 8px; /*ESPAÇO ENTRE OS BOTÕES*/}

/*menu ao ser selecionado*/.tabs-inner .widget li.selected a,.tabs-inner .widget li a:hover {position: relative;z-index: 1;background: #8BC2C9; /*COR DO FUNDO QUANDO SELECIONADO*/color: #fff; /*COR DA FONTE*/border-radius: 50px; /*APAGUE ESTA LINHA SE NAO QUISER BORDAS ARREDONDADAS*/line-height: 5px;padding: 12px; /*ESPAÇO INTERNO*/} 

 3- Olhe o resultado abaixo! Mude as cores no código, ao lado tem explicando o que é cada um. Se tiver duvida me mande comentario que respondo pelo e-mail.

RESULTADO:



4  - Mudem as cores do menu do jeito que quiser! Ao lado dos códigos explica o que é cada coisa. Reparem que ficou essa sombra atrás, vamos tirar ela? Procure no código do seu layout 

.tabs-inner .widget ul {