Amanda Raibolt Blog: Como fazer um layout para Blogspot do zero

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

< /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>

< /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!