1 de ago de 2017

Como fazer um layout para Blogspot do zero - Menu Fixo PARTE 2

Bom gente, como o primeiro post dessa série foi um sucesso vamos dar continuidade a criação do nosso layout para blogspot totalmente do zero, e hoje vou ensinar a vocês como pôr o MENU FIXO, aquele meu que fica ali preso mesmo que você role a página.
Esse menu ele além das páginas já fixas vem com as redes sociais também, então é bem indispensável para quem quer um blog mais profissional. Não é difícil, apenas vamos mexer com o HTML do blog, portanto se vocês sentirem dificuldade em mexer no HTML me avisem q farei em vídeos os próximos.
Vamos lá?


> PRIMEIRO nós vamos tirar esse menu (ou NAVBAR) que o blogspot tem, além de feio não combina com o nosso futuro layout não é? Então vamos tirar isso, vá até LAYOUT e clique no Gadget NAVBAR.
> Agora vá ao Gadget ENTRE COLUNAS e clique em ADCINIONAR UM GADGET procure por HTML/Java Script clique nele, não coloque nenhum titulo e abaixo na caixa maior escrita CONTEÚDO cole esse primeiro código abaixo:
* JUNTE A " < " PARA QUE OS LINKS FUNCIONEM NORMALMENTE

< div id='menufixo'>
< center>
< div id='alinhamentohorizontal'>
     < div id='menu'>
< a href='#'>NOME DA PAGINA
< a href='#'>NOME DA PAGINA
< a href='#'>NOME DA PAGINA
< a href='#'>NOME DA PAGINA
     < /div>

      < div id='redessociais'>
< a href='LINK DA REDE SOCIAL' target='_blank'>
< img src='IMAGEM1' onmouseout="this.src='IMAGEM 1';" onmouseover="this.src='IMAGEM 2-HOVER';"/>
       < /a>
    < /div>
< /div>
< /center>< /div>

> Agora vamos substituir tudo que está em negrito pelo que vou traduzir para vocês abaixo e feito todas as substituições salve.
#: link da página que será indicada
NOME DA PAGINA: Será o nome da pagina que você quer linkar, por exemplo: home inicio, categorias, sobre o blog, mais vídeos, etc.
LINK DA REDE SOCIAL: link da rede social com HTTP://
IMAGEM 1: primeira imagem quando não estiver com o cursor do mouse por cima
IMAGEM 2-HOVER: imagem com a cor que você vai querer que fique quando estiver sob o cursor.

Vale lembrar que essa parte das redes sociais você pode incluir quantas quiserem, basta você copiar da parte
Pode dar uma olhadinha e ver como ficou, ficou tudo bagunçado e é agora que vamos fazer os ajustes no HTML. 
> Vá pagina TEMA > EDITAR HTML > [Dê Ctrl F no seu teclado e vai abrir uma caixa de busca, procure por ]]>
e acima desse código cole o código abaixo:
/* Menu Fixo
---------------------------------*/
#alinhamentohorizontal {
width: 1080px;
}
#menufixo {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
background: rgba(255, 255, 255, 0.88); / FUNDO TRANSPARENTE É ESSE CÓDIGO /
height: 45px;
color: #e39d9d;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99;
opacity: 0.9;
}
#menu {
padding: 13px 0px;
text-align:center;
}
#menu a {
color: #000;
padding: 0px 25px;
text-transform: uppercase;
-webkit-transition: .4s;
}
#menu a:hover {
text-decoration: none;
color: #e39d9d;
}

> Substitua tudo que está em negrito, pelo que irei traduzir abaixo.
WIDTH: Ponha sempre a largura que você usou no blog
FONT-FAMILY: É o modelo de fonte que será usado,caso você não saiba qual usar vá ate o Google Fonts e conheça algumas.
FONT-SIZE: É o tamanho da fonte que será usada no menu,uma dica,não use uma fonte nem muito grande nem muito pequena para além de não deixar aparencia feia também nao dificultar o leitor na leitura.
BACKGROUND: É a cor de fundo que você vai querer usar no menu,as que estao acima são as cores para um fundo transparente
HEIGHT: É a altura do seu menu
COLOR: é a cor que será usada nas letras
POSITION: A posição que ficara seu menu
PADDING: É o espaçamento de uma palavra para outra
TEXT-ALIGN: É o alinhamento do texto

#menu a hover: quando o cursor estiver sob a palavra
COLOR: Cor que a palavra ficara quando o estiver com o cursor em cima
TEXT-TRANSFORM: Modo que ficara a palavra (uppercase significa que a palavra sempre estará em caixa alta)
> Salva o tema e confira como ficou:
PERA GENTE TA ACABANDO JURO, É LONGO MESMO, MAS VALE A PENA rs
> Agora procure novamente pelo código ]]>
e acima desse código cole o código abaixo:

/*REDES
-----------------------------*/
#redessociais {
float:right;
margin: -33px -54px;
}
#redessociais a {
padding: 5px;
texte-align: center;
}
#redessociais a:hover {
text-decoration:none;
}
mymenu li {
list-style-type: none;
display: inline;
float: center;
padding: 0px;
}
#mymenu li a {
color: #fff;
text-decoration: none;
padding-center: 24px;
line-height: 37px;
}
#mymenu a:hover {
color: #EED5D2;
}
#mymenu ul {
list-style: none;
margin: 0;
padding: 0;
background: #fff;
margin-left: 40px;
}
#mymenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 120px;
padding-left: -40px;
}
#mymenu li ul a {
font-size: 12px;
line-height: 24px;
}
#mymenu li:hover ul ul,
#mymenu li:hover ul ul ul,
#mymenu li.sfhover ul ul,
#mymenu li.sfhover ul ul ul {
left: -999em;
}
#mymenu li:hover ul,
#mymenu li li:hover ul,
#mymenu li li li:hover ul,
#mymenu li.sfhover ul,
#mymenu li li.sfhover ul,
#mymenu li li li.sfhover ul {
left: auto;
}
#mymenuright {
float: right;
color: #fff;
}
> Esse código é para ajustar as redes sociais,mais uma vez substitua tudo que estiver em negrito:
FLOAT: É O posicionamento do menu
MARGIN: A margem de uma imagem para a outra
#mymenu a:hover {
COLOR: Cor da fonte em hover

> Salva o tema e veja como ficou.
E prontinho seu MENU FIXO já está instalado com sucesso! Gente, sobre as imagens das redes sociais, deixe aqui nos comentários se vocês querem que eu ensine a pegar e mudar a cor do HOVER, e se vocês preferem que eu continue com os posts assim ou em vídeo, assim eu saberei se to indo no caminho certo rs
Se ainda ficou alguma duvida ou vocês não conseguiram colocar o menu? Deixe aqui embaixo que eu vou tentar te ajudar, ta?
Espero que tenha ajudado mais uma vez esse post, porque para mim foi uma mão na roda, porque como disse lá em cima, um menu avista facilita não só a vida dos seus leitores como das futuras empresas que fecharão algum negocio com você e seu blog.
Um super beijo!

14 comentários:

  1. AI, adoro essas dicas, sempre preciso, obirgada!

    ResponderExcluir
    Respostas
    1. Helielza seja bem vinda aqui então,porque em breve vou publicar muitas outras dicas para blogueiras ;)

      Excluir
  2. Amei o post, ótima dica :D

    http://submersa-em-palavras.blogspot.com.br/

    ResponderExcluir
  3. Respostas
    1. tenta sim Elisangela,depois me conta o que achou ;)

      Excluir
  4. Respostas
    1. Paula aproveita,super útil e importante para nosso crescimento como blogueira,espero que dê certo :)

      Excluir
  5. Adoro esses tutoriais, de vez em quando eu gosto de mudar. Vou salvar sua dica e fazer um novo lay do zero.

    ResponderExcluir
    Respostas
    1. Paty fique a vontade,use e depois me conta se deu certo :)
      nas proximas semanas vou postar mais diquinhas para blogueiras!
      bjs

      Excluir
  6. Que tutorial mara, é sempre bom saber algumas coisinhas, mesmo se for as mais básicas, para conseguir mexer no blog e deixar com sua cara né.

    ResponderExcluir
    Respostas
    1. com certeza,eu no inicio sofria muito querendo modificar algumas coisas e as pessoas só pra ajudar cobravam,agora eu posso compartilhar com todos :)

      Excluir