5 Personalizando menu páginas do blogger

Olá gatinhas, tudo bom hoje eu trouxe um tutorial super fácil lembrando que não foi eu que criei o código!
O código original e da Anny do Go Imagine modificado pelo Bloguinho Cute  os créditos vão pra elas!
Vamos ao tutorial!

CLIQUEM LEIA MAIS...





Vá em modelo- editar html -prosseguir dê crtl+ F e procure por => /* Tabs
E apague toda essa parte =>

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

Agora substitua por um dos códigos abaixo:

Opção 1 Menu redondo:

/* Menu do blogger personalizado by Go Imagine modificado por Bloguinho Cute

----------------------------------------------- */

.tabs-inner {

margin: 1em 0 0;

padding: 0;

margin-top: 0px; /*para subir ou descer o menu troque o número*/

margin-left: 200px; /*para afastar o menu para esquerda ou direita troque o número*/

}

.tabs-inner .section {

margin: 0;

}

.tabs-inner .widget ul {

padding: 0;

}

.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: #9370D8; /*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: #FFB6C1; /*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*/

}

Opção 2 menu quadrado:

/* Menu do blogger personalizado by Go Imagine modificado por Bloguinho Cute

----------------------------------------------- */

.tabs-inner {

margin: 1em 0 0;

padding: 0;

margin-top: 0px; /*para subir ou descer o menu troque o número*/

margin-left: 200px; /*para afastar o menu para esquerda ou direita troque o número*/

}

.tabs-inner .section {

margin: 0;

}

.tabs-inner .widget ul {

padding: 0;

}

.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: 5px; /*bordas arredondadas, apague a linha se n quiser*/

line-height: 5px;

padding: 12px;

background:#FF78C7; /*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: #C0D9D9; /*cor do fundo hover/selecionado*/

color: #fff; /*cor da fonte*/

border-radius: 5px; /*bordas arredondadas, apague a linha se n quiser*/

line-height: 5px;

padding: 12px; /*espaçamento interno*/

}

Vocês podem está modificando as cores usando essa tabela Aqui .

Beijos e Feliz ano novo a todos os meus leitores

OBS> testado somente modelo viagem-travel