18 junho 2015

Menu fixo no Blog


O tutorial dessa semana é de como colocar um menu fixo no seu blogger. E no fim do post tem um super bônus ensinando a colocar uma caixa de busca no menu <3

Vocês vão ver o quanto é fácil. Vou passar o código pronto pra vocês, e vou explicar o que é cada coisa pra vocês conseguirem adaptarem ele a gosto!




A Aparência do Menu

1. Primeiro, copie esse código:

.menutopo { z-index: 333; position: fixed; top: 0px; left: 0px; right: 0px; height: 25px; padding:18px; color: #fff; background-color: #000; font-size: 18px; text-align: center; font-family: 'Calibri'; text-transform: uppercase; }
.menutopo a { color: #fff!important; margin-right: 20px; }
.menutopo a:hover {  text-decoration:underline }
.menutopo img { margin-top: -3px; align:right; width: 35px; margin-left: 5px; float: right;}


2. Entendendo o código:

color:#fff - cor da fonte (os dois "color" tem que ser da mesma cor)
background-color: #000 - cor do fundo
font-size: 18px - tamanho da fonte
font-family: 'Calibri' - nome da fonte
text-transform: uppercase - texto maiúsculo
text-decoration:underline - texto sublinhado (quando passa o mouse) / para tirar, é só no lugar do underline colocar none
padding:18px; - tamanho em volta. Mude o valor para deixar mais fino o mais largo.

Dica Extra: o a:hover no código, é o que acontece com o LINK quando passa o mouse, você pode por outra cor, por exemplo, mudar a cor do fundo... Deixe o menu com o seu jeito

Help: Não sabe qual cor usar? Entre nessa Tabela de Cores, escolha uma cor e copie o código, por exemplo: #FF0000

Essas são as coisas que você pode mudar na aparência do menu, se não entende de CSS, não mexa em nada além disso.

Agora vá em Modelo e Editar Html como na imagem:

Clique para ver maior

Aperte dentro do quadrado com os códigos, e pressione CTRL+F, vai abrir uma caixa de pesquisa. Nessa caixa digite:  ]]></b:skin> e aperte Enter


Clique para ver maior.


ANTES dessa tag → ]]></b:skin> ← cole o código que você copiou. (Ou alterou)

Clique para ver maior.

Clique em salvar.

Esse é só o estilo (css) do menu. Para o menu aparecer de fato, vamos colocá-lo no layout.

Vá em layout e Adicione um Gadget na Barra Lateral (Em alguns blogs da erro se for em outro lugar). Não tem problema, o menu vai aparecer no topo de qualquer forma.




Obs. Caso o seu layout não tenha essa sessão de Adicionar Gadgets ou não funcione, cole o código depois da tag <body> ou <body... no Editar HTML. (Use o ctrl+f para achar).

Cole o seguinte código:


<div class="menutopo">

<a href="/"> Início </a>
<a href="LINKAQUI"> TÍTULO </a>
<a href="LINKAQUI"> TÍTULO </a>
<a href="LINKAQUI"> TÍTULO </a>

</div>

Mudando o código para os seus links

LINKAQUI você vai colocar o link desejado, e em TÍTULO o nome que vai aparecer.
Caso queira entender melhor essa parte, de como colocar seus links e categorias, confira esse tutorial de COMO COLOCAR SEUS LINKS NO MENU DO BLOG.

Depois disso é só salvar!

E aí? Conseguiram? Comentem pra eu saber se estou ajudando hahah. Se não tiver conseguido, comente o problema pra que eu possa ajudar <3

Bônus: Caixa de busca no menu

Antes do </div> Acrescente:

<style>

#search {
    float: right;
    height: 30px;
    margin-right: 30px;
    margin-top: -5px;
}

#search input.field {
    padding: 10px;
    outline: none;
    font-size: 13px;
    z-index: 1;
    width: 220px;
    position: relative;
}

#search input.field:focus {
background-position:top right;
background-repeat:no-repeat;
}

#search input.field {
    background-color: #fff;
    border: 1px solid #000;
    color: #000;
    background-image: url('https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_search_48px-128.png');
    background-size: 12%;
    background-position: right;
    background-repeat: no-repeat;
}

#search input.field:focus {

}

</style>
<div id='search'>
<form action='/search' id='searchform' method='get'>
<div><input class='field' id='s' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Digite e tecle Enter&apos;;}' onfocus='if (this.value == &apos;Digite e tecle Enter&apos;) {this.value = &apos;&apos;;}' type='text' value='Digite e tecle Enter'/></div>
</form>
</div>

</div>

Se a caixa ficar muito grande na altura, mude o padding: 10px; para um número menor (não apague o px). Se ela ficar muito larga, mude o width: 220px; pra um número menor.

Se você gostou do tutorial, tem muito mais de onde veio na página EXTRAS do blog! Ah, se você quer mais tutoriais como esse, dicas para o seu blog, cadastre-se aqui para receber nossa newsletter e não perder nenhum. Tem conteúdo exclusivo para assinantes. Logo vou começar uma série para blogueiros iniciantes, você não vai querer perder! 

Comente com o Facebook:

32 comentários:

  1. Adorei!! Eu super estava precisando disso esses dias atrás, mas nenhum lugar tava tão bem explicadinho <3

    http://alanaespozetti.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom que eu pude ajudar Alana <3 Obrigada pela visita, beijos ♥

      Excluir
  2. aaaaaaaaaaaagora você faz esse post depois de eu ter morrido pra achar um tutorial bom <\3 , achei um , mas caso um dia eu precise ja sei da onde vou tirar haha ! ameeei
    www.tempolivreblog.com

    ResponderExcluir
    Respostas
    1. kkkkkkkkk isso sempre acontece! Agora você ja sabe, quando precisar de um tutorial, vem no meu blog <3 kkk e se não achar, é só me avisar que eu faço! kkk

      Excluir
  3. Adorei o post, bem explicativo. Gostaria de deixar uma sugestão. Ensina a colocar a barra de busca dentro dessa barra de menu? O meu tem a barra de menu, mas n consigo colocar uma barra de busca dentro dele. Beijos!

    ResponderExcluir
    Respostas
    1. Boa dica Keila, vou acrescentar isso ao tutorial, beijão ♥

      Excluir
  4. Não consegui achar a primeira tag no meu blog . O que faço?

    ResponderExcluir
    Respostas
    1. Procura de novo, é ]]> (tenha certeza de que não tem nenhum espaço na caixinha de busca, talvez você não achou por isso. Sempre tem essa tag.. Caso não ache, me manda o link do seu blog pra eu ver. Espero que consiga, beijão <3

      Excluir
  5. Mulher você é diva ! não achei nenhum lugar que explicasse tão bem de uma maneira objetiva sem muito lenga lenga. Agoora vou testar pra ver se consigo rs Desde já muito obrigada. Bjao www.renatamariano.com.br

    ResponderExcluir
    Respostas
    1. Hahaha, obrigada Renata! Espero que consiga, mas se não conseguir é só gritar aqui que eu ajudo, viu? Eu que agradeço pela visita, beijão pra você também!

      Excluir
  6. Vish o meu ficou bugado :/ não deu certo www.renatamariano.com.br

    ResponderExcluir
    Respostas
    1. Ficou bugado como? Se você me explicar posso tentar resolver :3

      Excluir
  7. OMG! Estava precisando deste tutorial, graças á Deus e á você, eu vou realizar esse meu "sonho" haha.
    caprichandonaresenha.blogspot.com

    ResponderExcluir
  8. Que bom linda, espero que tenha conseguido <3 Beijão!

    ResponderExcluir
  9. Amei! Já tinha procurado a morrer e nunca ficava legal.. o teu simples, prático e bem explicadinho <3 obrigada!

    http://um1diariogeek.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Imagina, eu que agradeço pela visita. Que bom que gostou ♥ Beijosss

      Excluir
  10. Respostas
    1. Você fez tudo certinho? Eu testei pra ver antes, e funcionou... Se tiver com problemas pra fazer me avisa que eu ajudo ^^

      Excluir
  11. Não funcionou... quando terminei, o menu ficou no sidebar :(

    ResponderExcluir
    Respostas
    1. Poxa Maria, qual seu blog? Você colocou o primeiro código, (aquele que vai no Editar HTML) certinho? Porque é ele que faz o menu ficar no topo... Me manda seu blog pra eu dar uma olhada, beijos!

      Excluir
  12. Quero muito hee, amanha vou fazer com calma..Obrigada <3

    ResponderExcluir
  13. Parabéns pelo post muito bem explicado, depois de procurar tanto pela internet esse tutorial pois todos davam erro no meu layout, eu encontrei esse blog lindo *-* Só fiquei com uma duvida se eu quiser inserir uma barra de busca também qual código devo usar?

    ResponderExcluir
    Respostas
    1. Oi linda, muito obrigada viu? Já atualizei o post ensinando a por a barra de busca! Beijão <3

      Excluir
  14. Você é MUITO LINDA hahahaha, ficou bem fácil de entender da forma como explicou e eu já usei lá no blog, muuuuito obrigada por esse tutorial!! <3

    Flores de Novembro

    ResponderExcluir
    Respostas
    1. Obrigadaaaa, linda é você! Fico muito feliz por ter ajudado, de verdade! Beijão <3

      Excluir
  15. tentei no meu blog de testes ficou ótimo , fiz o mesmo passo a passo no meu Fixo apareceu na sidebar !, já tentei umas três vezes e nada . porque quero acompanhar com oque eu ja tenho no blog e não funcionou !

    www.bubbslandia.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Olha, não entendi muito bem o que você quis dizer... O código funciona nos meus layouts, e nos do próprio blogger. Sua estrutura é bem diferente da minha, e deve ser por isso...

      Excluir
  16. Boa tarde, eu tentei fazer esse menu no meu blog mas não deu certo... fica aparecendo apenas o código.... também não encontrei o ]]>... me ajude por favor!

    ResponderExcluir
  17. Este comentário foi removido pelo autor.

    ResponderExcluir
  18. Lary, ficou otimo! Só fiquei com duvida sobre como trocar a cor do texto quando o mouse estiver sobre ele. tem como explicar um pouco mais?
    Obrigada lindona!! <3 <3 <3

    ResponderExcluir
  19. Amei o tutorial <3 Deu certinho no blog e foi bem fácil de colocar.
    Você pode fazer um tutorial com submenus nesse mesmo estilo? Adoraria aprender e colocar lá no blog. Beijinhos :*

    ResponderExcluir

Butlariz • contatobutlariz@gmail.com Feito com ♥ por Lariz Santana / Moonly Design