13 de outubro de 2015

Tutorial: Menu na faixa do cabeçalho (meu modo)

Resultado de imagem para ilustrações de post de animes kawaii
Konnitiwa minna!
Eu vou ensinar para vocês o meu modo que faço para colocar o menu na faixinha do cabeçalho, é um pouquinho chato, mas não provoca problemas.
Ontem deu um bolo, excluí sem querer o meu menu e fiquei uma doida procurando por tutoriais porque havia apagado o código que fiz. Procurei na internet para solucionar o meu problema, mas acabou que era mais trabalhoso os outros tutoriais. Tive que lembrar como que fiz o código e acabei conseguindo.
O modo em que todos os outros tutoriais têm é de adicionar um gadget de páginas e alterar umas coisas no código do modelo, fiz tudo certinho e deu tudo errado, nem sei o porque.
Eu fui olhar os comentários destes blogs, e muitas blogueiras diziam que dava errado também.
Então resolvi fazer este post ensinando a fazer do meu modo, que é um pouco mais fácil, ou seja, este tutorial foi feito por mim. Então peço que se postar o meu modo, por favor, creditar o Blog Neko Kawaii, já se você usar nem precisa dar créditos, mas se quiser dar, obrigada!
Ahh gente, antes que perguntem, este modo dá em qualquer modelo.
Vamos começar! 

1º etapa:
Você vai precisar de colocar 2 backgrounds no blog, 

2º etapa:
Vá em Layout e adicione um gadget de HTML/JavaScript em baixo do cabeçalho e cole o código abaixo:

<div dir="ltr" style="text-align: left;" trbidi="on"><a 
href="LINK 1" style="font-size: 16px;">Nome 1</a>&nbsp;&nbsp;<span style="font-size: 16px;">&nbsp;</span><a 
href="LINK 2" style="font-size: 16px;">Nome 2</a>&nbsp;&nbsp;<span style="font-size: 16px;">&nbsp;</span><a 
href="LINK 3" style="font-size: 16px;">Nome 3</a>&nbsp;&nbsp;<span style="font-size: 16px;">&nbsp;</span><a 
href="LINK 4" style="font-size: 16px;">Nome 4</a>&nbsp;&nbsp;<span style="font-size: 16px;">&nbsp;</span><a 

Caso queira adicionar mais é só acrescentar:
href="LINK " style="font-size: 16px;">Nome </a>&nbsp;&nbsp;<span style="font-size: 16px;">&nbsp;</span><a 

Bom pessoal, logo depois de colar este código, altere os negritos.
LINK - Ta na cara que é o link da página.
Nome - É o nome que vai aparecer.
16px - É o tamanho da letra. Gente, tem que alterar todos esses 16px, não pode alterar só 1 se quiser aumentar ou diminuir a letra.

Agora vamos para a parte mais chata e trabalhosa.
Em cima do código todo, vocês vão colar o código abaixo:
<div style="position: absolute; margin-top: -130px; left: 280px;">

O  margin - top, valores negativos sobem e positivos descem.
E o left, negativos vão para a esquerda e positivos se deslocam para a direita.
É só você arrumar de acordo com a faixa do seu cabeçalho.

Depois disso, é só adicionar no final do código essa tag:
</div>


Como tem que ficar tudo:



<div style="position: absolute; margin-top: -130px; left: 280px;">

<div dir="ltr" style="text-align: left;" trbidi="on"><a 
href="LINK 1" style="font-size: 16px;">Nome 1</a>&nbsp;&nbsp;<span style="font-size: 16px;">&nbsp;</span><a 
href="LINK 2" style="font-size: 16px;">Nome 2</a>&nbsp;&nbsp;<span style="font-size: 16px;">&nbsp;</span><a 
href="LINK 3" style="font-size: 16px;">Nome 3</a>&nbsp;&nbsp;<span style="font-size: 16px;">&nbsp;</span><a 
href="LINK 4" style="font-size: 16px;">Nome 4</a>&nbsp;&nbsp;<span style="font-size: 16px;">&nbsp;</span><a 
</div>


Observação: a cor das letras do menu, vai ser a mesma cor de um link do seu blog. Caso queira que a letra fique com uma cor diferente, é só ir alterar a cor do link nas configurações do blog.

Depois é só salvar.

Meu resultado:

Espero ter ajudado.
Beijos

4 comentários:

  1. nossa que belo tuto <3 http://wondergilsdreams.blogspot.com.br/

    ResponderExcluir
  2. Adorei o tutorial! Quando eu altera meu layout, isso servirá bastante...
    bjus
    http://acidadeliteraria.blogspot.com/

    ResponderExcluir

Comente a vontade, desde que saiba respeitar ;)
Ah, e não é necessário fazer uma conta para comentar, basta colocar como anônimo.

Emoticons:

♥❤∞ ☆ ★ ✖ 。◕‿◕。® ™ ☏✿゚✤
(◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●
⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙
≡(▔﹏▔)≡ ( ͡° ͜ʖ ͡°)