Olá galerinha geek! 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:
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 {Seu menu ficará assim:
display: inline-block;
padding: 10px;
color: #fff;
font: $(tabs.font);
}
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,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.
.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);
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 {O resultado final do menu será esse:
position: relative;
z-index: 1;
background: #a22b4c;
color: #fff;
}
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!
Esses dias mesmo eu tava procurando um tutorial de como editar o menu do blog, sorte que eu vi seu tutorialzinho :3
ResponderExcluirQue sorte mesmo, não é? Hahahaha
ExcluirE aí, conseguiu editar?