20.11.15

Personalizando menu do Blogger



Olá Lírios! Como estão?

Hoje trago a vocês um tutorial de como personalizar o próprio menu do Blogger. Eu particularmente acho que fica muito mais estiloso e beeeeeeem menos trabalhoso do que ficar colocando menus na sidebar. E é super fácil, vai por mim!

Antes de começarmos, deixa eu só explicar um pouquinho como esse menu foi criado para você não ficar a ver navios durante o tutorial.

O menu do blogger, assim como em qualquer site, é construído usando uma lista. Para criá-la, são necessários no mínimo dois elementos: um para indicar qual o tipo de lista que está sendo utilizado (ordenada ou não ordenada) e outro para indicar os itens pertencentes a essa lista. Mas não se preocupe, você não vai precisar ser um expert no assunto para editar seu menu. Vou dando mais detalhes sobre o assunto durante o tutorial, para que vocês possam entender melhor, ok?

Vá em Modelo > Editar HTML. Clique dentro da caixa de edição do HTML e aperte CTRL+F para abrir a caixa de pesquisa. Procure por /* Tabs

Seu HTML estará assim:


E o menu assim: 



Vamos começar editando a primeira parte do código. Procure por .tabs-inner { . Essa parte estará assim:

.tabs-inner {
margin: 1em 0;
  padding: 0;

Substitua a primeira linha por margin-top: 50px; . Ficará assim:

.tabs-inner {
margin-top: 50px;
  padding: 0;
}

Nessa parte, você edita a posição do seu menu. Você pode movê-lo para cima ou para baixo. Quanto maior o valor, mais baixo ele fica. Você também pode usar números negativos para subir ainda mais seu menu. Por exemplo, nessa imagem eu estou usando margin-top: -10px; enquanto na segunda imagem da postagem estou usando margin-top: 50px; .

Ah, mas por que estou editanto esse .tabs-inner? Bem, esse é o nome da div que o blog usou para criar o menu. Ela é uma tag usada para alterar o estilo em partes específicas de uma página e posicionar os objetos. É por causa dela que conseguimos mudar a posição do menu e iremos personalizá-lo ao nosso gosto, entenderam?

Vamos mudar a cor do fundo do seu menu. Procure por .tabs-inner .widget ul { . Seu código estará assim:

.tabs-inner .widget ul {
padding: 0;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;
}

Substitua o que está depois de background:  por um código de cor, não esquecendo de colocar um ponto e vírgula (;) no final. Assim:

.tabs-inner .widget ul {
  padding: 0;
background: #fa215d;
}

Nosso menu ficará assim:



 Lembra quando expliquei que são necessários no mínimo dois elementos para criar uma lista? o Blogger está usando o ul, a representação da lista não ordenada, nessa parte do código. Aqui nós só editamos o fundo mesmo. Se mexermos em mais coisas, nosso menu não ficará com um aspecto legal. Mas se quiser saber o que acontece se colocarmos outras características nessa parte do menu, fiquem à vontade. Para aprender HTML você precisa fuçar mesmo! Só salve seu layout antes de fazer isso para não perder nada do que já fez, ok?

Abaixo dessa tag que você acabou de editar, você encontrará essa: .tabs-inner .widget li { . O li é o segundo elemento que toda lista precisa ter para se criar o menu, como citado antes. Ele é a lista em si. Porém, o nosso menu está com links, então tudo o que você editar aqui não irá funcionar. Isso por que a tag de link sobrepõe a tag li - digamos que uma é "maior" que a outra, em consequência disso, você não consegue mexer na "menor".

Então vamos editar a próxima div. Procure por .tabs-inner .widget li a { . Ela estará assim:

.tabs-inner .widget li a {
  display: inline-block;
  padding: 1em 1.5em;
  color: $(tabs.text.color);
  font: $(tabs.font);
}

Aqui, você irá mudar o valor de padding e color.  Eu já expliquei sobre como funciona o padding nesse tutorial. Passe por lá para entender e aproveite para conferir o tutorial também! ;) Mas, resumindo, ele irá definir o tamanho do espaçamento interno do link, ou seja, o tamanho do seu menu. Coloque um valor em pixels para alterar. Eu deixei com 10px. Display permite que você defina como o elemento será renderizado, mas não vamos mexer nele. Color muda a cor da letra do seu link e font muda o tipo da fonte. Isso você pode editar no próprio Personalizar do Blogger ou, se preferir, colocar uma fonte personalizada da internet. Eu optei em deixar como está.

O código ficará assim:

.tabs-inner .widget li a {
  display: inline-block;
  padding: 10px;
  color: #fff; 

  font: $(tabs.font);
}
Seu menu ficará assim:


Por último, vamos editar o hover do menu. Tem uma explicação do que é esse efeito nesse tutorial aqui, passe por lá também, ok?

Procure por .tabs-inner .widget li.selected a,

Seu código estará assim:

.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);
Essa primeira tag deixa com que a página em que você está fique selecionada. Por exemplo, na imagem anterior, a página Início está selecionada, mostrando ao visitante que ele está na Home do blog naquele momento. Eu não gosto dessa opção, então eu sempre apago essa primeira parte.

As únicas coisas que você irá alterar aqui são o background e o color. Escolha uma cor e coloque os valores das cores.

.tabs-inner .widget li a:hover {
  position: relative;
  z-index: 1;
  background: #a22b4c;
  color: #fff;
}
O resultado final do menu será esse:



E todo o código editado do menu ficará dessa forma:

/* Tabs
----------------------------------------------- */
.tabs-inner {
margin-top: 50px; /* posição do menu */
  padding: 0;
}
.tabs-inner .section {
  margin: 0;
}
.tabs-inner .widget ul {
  padding: 0;
background: #fa215d; /* cor do fundo do menu */
}
.tabs-inner .widget li {
  border: none;
}
.tabs-inner .widget li a {
  display: inline-block;
  padding: 10px; /* espaçamento interno/tamanho do menu */
  color: #fff; /* cor da letra */
  font: $(tabs.font);
}
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
  position: relative;
  z-index: 1;
  background: #a22b4c; /* cor do fundo ao passar o mouse */
  color: #fff; /* cor da letra ao passar o mouse */
}

E é isso! Gostaram? Se tiverem dúvidas, é só perguntar. E me mostrem o resultado de vocês!

Até mais!

2 comentários:

  1. Esses dias mesmo eu tava procurando um tutorial de como editar o menu do blog, sorte que eu vi seu tutorialzinho :3

    ResponderExcluir
    Respostas
    1. Que sorte mesmo, não é? Hahahaha
      E aí, conseguiu editar?

      Excluir

Related Posts Plugin for WordPress, Blogger...