Personalizando o Menu de Páginas do Blogger

Oi. Hoje trouxe uma forma para personalização do menu de páginas padrão do Blogger, bem simples, para mudar apenas o estilo dos links, como fiz nesse template aqui: Simple Kawaii. Testei nos modelos Simple e Travel.

Modelo Simple

Quando fui personalizar no Simple, deu certo de 2 maneiras:

Adicionando este código antes de </b:skin>:

 #PageList1 {
width: 100%;
top: -40px;
left: 0px;
font-family: 'Kavoon';
font-size: 50px;
text-align: left;
text-shadow: 2px 3px 4px #fcc;
}
#PageList1 a:hover {
text-shadow: 2px 3px 4px #fcc;
text-decoration: underline;
}

O resultado será igual ao do modelo Simple Kawaii. Se dessa forma acima não der certo apague os códigos que adicionou antes de /b:skin; tente substituir tudo o que houver depois de /* Tabs até /* Columns, pelo código seguinte; o resultado será um menu acima do cabeçalho assim:

 /* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {/*area geral*/
  border-top: none;
  width: 100%;
}
.tabs-inner .section:first-child ul {/*sobe o menu*/
  margin-top: -150px;
  border: none;
}
.tabs-inner .widget ul {/*background area geral*/
  background: #transparent;
  border: none;
}
.tabs-inner .widget li a {/*links*/
  display: inline-block;
  padding: 10px;
  border: none;
  color: #FAE2FF;
  left: 0px;
  font-family: 'Kavoon';
  font-size: 40px;
  text-align: left;
  text-shadow: 2px 3px 4px #fcc;
}
.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {/*links quando o mouse passar*/
  color: #fee;
  background: none;
  text-decoration: none;
}

Talvez seja necessário trazer o cabeçalho mais para baixo; acrescente em header-outer o valor top: 80px; ou mais, de acordo com o que desejar obter.

Modelo Travel

Aqui deu certo substituindo tudo de /* Tabs até /* Headings; depois foi só posicionar a área de posts, como já mostrei nesse post aqui.

Para usar a fonte Kavoon, cole isso antes de </head>:

<link href='http://fonts.googleapis.com/css?family=Kavoon' rel='stylesheet' type='text/css'/>

E pronto. É só ir mudando valores, cores, aplicando estilos ao código até ficar ao seu gosto. Espero que gostem :3

2 Comentários

Docência em Serviço Social13 março
Estou precisando muito desse tuto..meu modelo é travel mas nao deu certo, nada mudou....MUITO SOFRENDO!!!
ResponderExcluir
Respostas

Adicionar comentário

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

Reino Kawaii