26 junho 2015

#TutoriaisDaJaque: Fazendo meu Layout #4

OLÁÁÁÁÁÁ <3

 Eu sei que deveria ter postado semana passada mããããããs esse frio, gente, não dá! Só consigo ficar deitada com vários cobertas em cima de mim e tremer de frio. Mas cá estou eu, como prometido, e hoje trago a parte #4 de Fazendo meu Layout  õ/

Caso você queira aprender apenas como colocar o Menu Fixo no Topo do Blog vá para a Segunda Parte deste Tutorial ;)

 Bom, hoje vim ensinar vocês como alterar a imagem da Favicon - Aquela imagem pequena que fica lá em cima - como excluir a Navbar, como tirar o nome do seu blog que fica acima do Header (cabeçalho) importante! e como colocar MENU FIXO NO TOPO Õ/

 Bonitos, todas as imagens que eu usar nestes tutoriais estão disponíveis para Download aqui.
 Acho que as imagens estão bem explicadas mas caso você tenha alguma duvida deixe nos comentários aqui abaixo ;)





 Como vocês puderam notar, o blogger alterou um pouco o designer do "Layout".
Em Cross-Column clique em Adicionar um Gadget e escolha um Gadget HTML/JavaScript.
Irá abrir uma aba e dentro dela cole:
<div id='menufixotopo'>
<center>
<div id='alinhamentohorizontal'>
<div id='menu'>
<a href='LINK DO PERFIL'>NOME</a>
<a href='LINK DO PERFIL'>NOME</a>
<a href='LINK DO PERFIL'>NOME</a>
<a href='LINK DO PERFIL'>NOME</a>
</div>
</div>
</center>
</div>
Em Link do Perfil você deverá colocar o link do local que você quer que a pessoa seja direcionada ao clicar. e em Nome você deverá colocar o nome que corresponde a esse link que você colocou.
Caso você queira colocar mais algum link, apenas acrescente abaixo do </a> mais um <a href='LINK'>NOME</a> e agora Salve e veja como ficou.
 Deverá estar assim:

Procure por ]]></b:skin> acima do código encontrado cole este código:

/* Menu Fixo
-------------------------------------*/
#alinhamentohorizontal {width: 1500px; /*Largura da imagem*/}
#menufixotopo {
font-family: tahoma; /* Nome da fonte */
background: url(http://static.tumblr.com/wlnblxn/O2Nnqkya8/menu1.png) repeat; /* Imagem de fundo*/
height: 40px; /* Altura da imagem*/
  position: fixed; /* Não alterar*/
  top: 0; /* Não alterar*/
  left: 0; /* Não alterar*/
  width: 100%; /* Não alterar*/
  z-index: 99; /* Não alterar*/
}
#menu {font-size: 13px; /* Tamanho da fonte */
padding: 4px 0px; /* Altura da margem de cima/baixo */
}
#menu a {color: #5c5c5c; /* Cor da fonte */
padding: 0px 65px; /* Altera os espaçamento entre as palavras */
text-transform: uppercase; /* Todas as letras em maiusculo */
}
#menu a:hover {text-decoration:none;
color: #fed8e3; /* Cor da fonte quando passar o mouse */
}

Clique em Salvar Modelo e verifique como ficou. Caso queira fazer alguma alteração fique a vontade, ao lado de cada linha eu deixei uma mensagem explicando para o que serve.

 Eu era louca para aprender como colocar Menu Fixo no topo do blog, acho a coisa mais fofa <3'
Espero muito que vocês tenham gostado, esse tutorial foi um dos mais pedidos - podem pedir mais que eu AMO quando alguém vem pedir tutorial pra mim HAHA 

Estou editando todos os posts de tutoriais aqui do OAB ♥ 04.01.2016




27 comentários:

  1. Pow Jaque gostei das dicas para fazer lay. Quem sabe eu um dia paro de preguiça é tento aprender hehe. Beijos xuxu

    http://joicyrecco.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Tem que ter muuuuuita paciencia, viu? kkkkkkkk
      Tem horas que dá vontade de jogar tudo para o alto e dizer? CHEEEEGAAA!
      Tenta fazer sim, Joicy, vai que você gosta haha
      Três beijos, liindona <3

      Excluir
  2. Tava louca nesse tutorial Amei demias!! Beijoooo! <3

    ResponderExcluir
  3. Jaque eu simplesmente AMEEEEEEI o seu jeito de fazer tutorial, super explicadinho, parabens. Eu queria que voce me ajudasse, na verdade eu queria colocar um menu entre o cabeçalho e os posts, só que um diferente do que já tem disponivel no blogger. Como faz?

    ResponderExcluir
  4. Eu não consegui :( :( Me ajuda por favorrrr , o seu foi o único tutorial que eu achei, mas não quer aparecer :( , me ajuda !!!

    ResponderExcluir
    Respostas
    1. Gabiii, entrei no teu blog e vi que já tem adicionado um Menu Fixo lá, espero que tenha conseguidooooo

      Excluir
  5. Ahh vc é de maais ! Mais uma fã ... Seu blog está me ajudando bastante , obrigada !

    ResponderExcluir
    Respostas
    1. Sério, Joyceee? Ai que ÓTIMOO!
      Fico muito feliz MEESMO por poder te ajudaaar <3

      Excluir
  6. Pfv,me responde
    Não consigo centralizar os nomes
    Tô fazendo tudo no blog de teste
    http://tentandosmyle.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Jamille, pelo o que eu vi, os nomes no menu fixo estão centralizados sim. Tá tudo certinho aqui pra mim, tem como cê ser mais especifica? Dai eu tento te ajudar ;)

      Excluir
  7. Jaque linda, amei... estou usando!

    Como deixa esse menu fixo responsivo?

    Beijoooooooooooooooos s2

    www.livremente.blog.br

    ResponderExcluir
  8. Damaryssss, teu blog tá tão fofoooo *o*
    Eu ainda estou aprendendo a mexer em coisas responsivas :/
    sei que tem que mexer em várias parte do código fonte todinho do blog, para que ele fique responsivo, assim que eu aprender posso atualizar o tutorial.

    Beijooos, lindaa <3

    ResponderExcluir
    Respostas
    1. Obg gatona s2

      Isso de responsivo é complicado mesmo estou me matando kkk.
      Aguardamos mais tutorias AHHAHAHA

      Beijinhos <3

      Excluir
    2. É complicado mas vale a pena, né? Ainda não comecei "minhas aulas" mas assim que eu começar eu quero colocar me pratica aqui.
      Vou pensar em mais alguns pra ensinar aqui.
      Beijoooos, Dah :*

      Excluir
  9. Muito obrigada no meu ficou lindo. Mas devo avisar eu tive de mudar meu modelo para modelo simples, pois nos outros modelos não funciona(Testei). Valeu.

    ResponderExcluir
    Respostas
    1. eu uso ele no modelo Travel do Blogger e da certo também, amoree. Que bom que gostou e conseguiu fazer <3

      Excluir
  10. Eu queria saber como colocar também, caixa de pesquisa ou redes sociais no menu fixo. Alguém sabe?

    ResponderExcluir
    Respostas
    1. ensinei aqui no blog como faz pra colocar com a caixinha de pesquisa
      http://www.oablogueira.com/2016/03/tutoriaisdajaque-menu-fixo-com-imagem.html :*

      Excluir
  11. Oi fofa! Amei o seu blog. Gostaria que você postasse um tutorial, de como fazer um menu igual ao do seu blog

    ResponderExcluir
    Respostas
    1. Oi Fraaan, vou preparar o tutorial e postar, obrigada pela sugestão :***

      Excluir
  12. Oie, Jaque! Tudo bom? Amei o tuto, está perfeito! Funcionou direitinho comigo, mas quero deixar o texto no começo (vindo do lado esquerdo) do menu. Como faço isso?

    ResponderExcluir
    Respostas
    1. lindona, não entendi muito tua duvida. O texto tá centralizado no menu, se você quiser deixar eles no cantinho da tela basta você trocar o center por left, mas dai teria que apagar alguns padding e margins também, dai teria que testar

      Excluir
  13. Jaque faz um tutorial de como colocar essa imagem que vc coloca em baixo dos códigos oq ue tem fundo rosa e sua logo.

    ResponderExcluir
    Respostas
    1. Leh, é somente uma imagem que coloquei a mais no código do blockquote, mas vou ensinar sim!
      beijooos :*

      Excluir