9.8.16

Menu fixo (ou não) no topo do blog

9.8.16
Crédito: Pixabay


fffff
ffffff

Estou numa vibe louquíssima de personalizar um layout eu mesma. Nem vou falar de fazer um ainda, porque não domino nada disso, só gosto mesmo de uma boa gambiarra (mas estou vendo altos tutorais de html e css no youtube e aplicativos do android, então quem sabe um dia que não consiga essa proeza =D).

Verdade é que este layout meu, por motivos que desconheço, já está com várias coisas bugadas e isso está me dando nos nervos. A segunda página sumiu, as postagens relacionadas sumiram... E já cansei das cores também xD.

Estou contente com meu trabalho, espero poder trazê-lo em breve, ainda que esteja fazendo tudo sem a mínima pressa. Já tentei personalizar um layout várias vezes, mas sempre passei tanta raiva que acabei comprando um personalizado mesmo. São sempre muitos detalhes... E esse é um motivo pelo qual a gente tem que agradecer e valorizar muitíssimo todos os designers pela santa paciência, amém =).

Por isso a ideia é ir bem devagar, mesmo que demore um mês ou mais. Importante é fazer tudo o que eu quero nesse lay =).

Uma das coisas que sempre quis era um menu superior que não ficasse fixo no topo do blog, ou seja, que sumisse da minha área de visualização conforme eu rolasse a página, porque, convenhamos, não ofereço serviço nenhum, então não tem muito sentido uma barra com meus contatos e "sobre o meu blog" ficar atrapalhando a leitura dos posts. 


A questão é que SEMPRE que eu tentava fazer isso, e mudava no código a "tag" no css de "fixed" ou similar, por "relative", "absolute" etc, o menu bugava INTEIRO e não tinha nada que levasse o bichinho pra cima, nem o ajeitasse na largura do blog. O problema está entre o computador e a cadeira? Claro que sim, não vou discutir isso haha. 

Porém, como sou brasileira e não desisto NUNCA, consegui achar um código que me permitisse personalizá-lo melhor. Quero ressaltar que este código NÃO É MEU, é do blog lindo "We heart HTML", e se vocês quiserem fazer qualquer coisa com ele, cheguem lá e peçam ao Alan. Fiz isso antes de vir divulgá-lo aqui e ele me deixou, porque é uma pessoa iluminada de deus <3. De todos os modos, ter esse blog nos seus favoritos é simplesmente obrigatório, porque sempre que nada funciona na minha vida, corro lá e acho alguma coisa que funciona. Sério. Salvem o We heart html e levem-no nos seus corações todos os dias.

O tutorial do Alan Felipe é este (e tem figuras, então vai te ajudar a visualizar o menu =D)


http://wehearthtml.blogspot.com.br/2014/04/menu-fixo-no-topo-do-blog-com-caixa-de.html


O que eu fiz foi mexer um pouquinho nele e transformá-lo numa coisa que eu queria. Assim, olha:




Ele está com fundo branco, porque o fundo do meu blog é verde. 

Se for ver, não está muito diferente do que está aqui no blog, está muito mais simples, mas ele não é fixo, então estou contente. 

Só advertir que não é um procedimento muito direto (do tipo, abre um gadget e adiciona esse código, não), você vai ter que mexer em alguns lugarzinhos do blog. Mas é só ir com calma que não tem erro. Pense na coisa por partes, não se desespere e sempre procure usar o comando ctrl + f (ou ctrl + g no chrome).

E, claroooo: salve uma cópia do seu layout antes, porque se der problema, você não vai querer pular de ponta de um prédio. 

O passo 1, 2 e 3 estão no blog do Alan Felipe, e você deve ir lá. Não vou copiar o tutorial dele tanto em respeito ao seu trabalho, como por falta de necessidade mesmo, uma vez que já está escrito, né?

No passo 4 (que é: procurar o ]]></b:skin> e colar o código seguinte acima dele), você não usa o do Alan, usa o que eu "adaptei" (aquelas, se sentindo haha). Pode colar do jeito que está, não precisa apagar as legendas. Falo isso porque quando comecei a ver esses tutoriais de css, eu ficava louca pensando no que fazer com elas. Não dá nada, pode colar assim mesmo. 

menu {
 width: 100%;
 font-size: 16px;
 display: block;
 z-index: 9999999;
 position: relative; /*-- se você quiser que o menu fique fixo, escreva fixed no lugar de relative --*/ background: #FFFFFF; /*-- cor do fundo --*/ color: #507072; /*-- cor da fonte --*/ padding: 20px 0 40px 0;
 margin: 0px;
 margin-top: 0px; /*-- margem para cima, altere até ficar certo; número positivo desce, número negativo sobe --*/border-bottom: #e3eae8 solid 10px; /*-- essa aqui é aquela bordinha de baixo, se você não quiser, apenas coloque 0px ou simplesmente apague esta linha. --*/}
menu centro {
 display: block;
 margin: 0 auto;
 width: 1000px; /*-- largura do seu blog, aquela que você colocou em 'Personalizar' --*/ background: none;
}
menu a {
 color: #COR !important; /*-- cor dos links --*/ -moz-webkit-transition-duration: .50s;
 -webkit-transition-duration: .500s;
padding-right: 15px;  /*-----distância entre os itens do menu---*/}
menu a:hover {
 color: #COR !important; /*-- cor dos links ao passar o mouse --*/ -moz-webkit-transition-duration: .50s;
 -webkit-transition-duration: .500s;
}
.searchbar{
 height: 18px; /* Altura da barra */ width: 240px; /* Largura da barra */ background: #E3EAE8; /*-- Cor do fundo --*/ color: #507072; /*-- Cor da fonte da letra que será escrita quando procurarmos por algo --*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*-- Bordas arredondadas, apague se não quiser ou mude o valor dos números --*/ margin-left:0px;  /*--Margem esquerda --*/ padding:3px 5px;
 border:none;
}
.searchbut {
 background: url("http://static.tumblr.com/wkafvsi/jcLmsk7dm/teste1pesquisa.png") center no-repeat;
 margin-right: -35px;
 border:0 !important;
 margin-top: -26px;
 margin-bottom: -6px;
 float: right;
 height: 26px;
 width: 26px;
 cursor: pointer;
}
Salve as alterações e seja feliz.

O Alan também explica como proceder se você quiser tirar a caixa de pesquisa, é só acessar o link que coloquei no início da postagem.

Bom, acho que é isso.

Qualquer dúvida, e eu souber responder, às ordens. E, mais uma vez, não deixem de visitar o We heart HTML, porque é um super blog de dicas de html e css para nós, blogueiros iniciantes nessa vibe de personalizar layouts. =D



Comente com o Facebook:

4 comentários:

  1. Já até tentei mexer mas morro de medo porque não entendo nada, mas você tem se saído muito bem. Parabéns! Daqui a pouco já vou poder te perturbar para me ajudar nessas coisas.rsrs
    bjs

    ResponderExcluir
  2. Foi bom ter lido esse post, assim que o boy terminar o emstrado, vou mudar meu layout mas tenho medo de errar :S

    ResponderExcluir
  3. como eu faço para colocar as redes sociais no menu fixo?

    ResponderExcluir
  4. Preciso tomar coragem pra mexer no html...rs!

    ResponderExcluir

Nenhuma imagem presente neste blog me pertence. Todas foram encontradas na internet por meio de pesquisa no google.com e não viso qualquer fim comercial com seus respectivos usos. Se usei uma imagem sua e não lhe dei os devidos créditos, por favor me avise que o farei imediatamente, ou a retirarei do blog se você não quiser que eu a use. Visão Periférica - 2016

Design e Desenvolvimento por Moonly Design / ©