Tutorial: Como personalizar um layout passo a passo - Parte 2

12 novembro 2015
 
Como personalizar um layout

Finalmente apareci com o segundo post da série como personalizar um layout passo a passo. Nessa parte 2 nós iremos aprender como colocar menu fixo no topo do blog; como personalizar o menu padrão do blog; como colocar um cabeçalho personalizado no blog, porque primeiro eles? Pois o cabeçalho e o menu são fundamentais, é mais fácil combinar o corpo do layout com o cabeçalho, do que o cabeçalho com o corpo, entende? Bora lá!

Como personalizar o menu padrão do Blogger


Vamos começar por esse menu, e esse primeiro estilo é para quem não gosta de um menu fixo no topo e quer apenas personalizar o já existente no blogger. Veja como vai ficar:

Como personalizar o menu padrão do Blogger

Esse menu é do layout que fiz para a minha irmã, em breve mostrarei ele completo. Vá em "Modelo" > "Editar HTML" > expanda a primeira setinha > Ctrl+F e procure por:
/* Tabs
Você encontrará:
/* Tabs
----------------------------------------------- */
.tabs-inner {
margin: 1em 0 0;
padding: 0;
}
.tabs-inner .section {
margin: 0;
}
.tabs-inner .widget ul {
padding: 0;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;
}
.tabs-inner .widget li {
border: none;
}
.tabs-inner .widget li a {
display: inline-block;
padding: 1em 1.5em;
color: $(tabs.text.color);
font: $(tabs.font);
}
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
z-index: 1;
background: $(tabs.selected.background.color) $(tabs.selected.background.gradient) repeat scroll top center;
color: $(tabs.selected.text.color);
}
Substitua tudo pelo seguinte código:

/* Menu do blogger personalizado
----------------------------------------------- */
.tabs-inner {
margin: 1em 0 0;
padding: 0;
margin-top: 20px; /*para subir ou descer o menu troque o número*/
margin-left: 20px; /*para afastar o menu para esquerda ou direita troque o número*/
}
.tabs-inner .section {
margin: 0;
}
.tabs-inner .widget ul {
padding: 0;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;
}
.tabs-inner .widget li {
border: none;
}
/*Estado normal do menu*/
.tabs-inner .widget li a {
display: inline-block;
padding: 1em 1.5em;
color: #fff; /*cor da fonte*/
background: #8BC2C9; /*cor do fundo dos botões, troque*/
font-family: 'Amatic SC', cursive; /*fonte do menu, troque*/
font-size: 28px; /*tamanho da fonte do menu, troque se preferir*/
line-height: 5px;
padding: 15px;
margin-left: 8px; /*espaço entre os botões*/
}
/*Em hover*/
.tabs-inner .widget li a:hover {
color: #fff; /*cor da fonte*/
background: #FFCCCC; /*cor do menu em hover, troque*/
font-family: 'Amatic SC', cursive; /*fonte do menu, troque*/
font-size: 28px;
}
/*Selecionado*/
.tabs-inner .widget li.selected a {
color: #fff; /*cor da fonte*/
background: #8BC2C9;
font-family: 'Amatic SC', cursive;
font-size: 28px;
}

Modifique apenas onde eu indiquei, utilize ESSA tabela de cores para personalizar as cores do seu menu. "Hover" é o efeito que acontece quando passamos o mouse em cima do nome. Se quiser usar a mesma fonte, procure por:
<head>
E ABAIXO cole o seguinte código:
<link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'/> 

Como colocar o Menu fixo no topo do Blog


Agora irei ensinar a colocar o Menu fixo no topo do blog, igual ao meu. Esses códigos não são meus, e eu aprendi no blog Eai, Gabi?, então os créditos vão para ele.
Antes de tudo vá em "Layout" e exclua o gadget "Menu" (se tiver).  Em seguida vá em "Modelo" > "Editar Html". Expanda as setinhas e procure por:
</head>
ABAIXO desta tag cole o seguinte:

<div id='menufiixubpd'>
<li><a href='Link da página(não se esqueça do http://)'>HOME</a></li>
<li><a href='Link da página(não se esqueça do http://)'>NOME DA PÁGINA</a></li>
<li><a href='Link da página(não se esqueça do http://)'>NOME DA PÁGINA</a></li>
<li><a href='Link da página(não se esqueça do http://)'>NOME DA PÁGINA</a></li>
<li><a href='Link da página(não se esqueça do http://)'>NOME DA PÁGINA</a></li>
</div>
 Onde está "Link da página" cole o link da página, e onde está "Nome da Página" escreva seu respectivo nome.
Agora pesquise por:
]]></b:skin>
ACIMA desta tag cole o seguinte código:
#menufiixubpd {
z-index:6666666666666666666666666666666666666666666666666666666666666666666666666666666666;
background: #D3D3D3; /*-----cor de fundo---*/
font-family: 'Roboto Condensed', sans-serif; /*-----fonte---*/
text-align: center; /*-----alinhamento do texto---*/
padding: 7px; /*-----largura do menu---*/
font-size: 17px; /*-----tamanho da fonte---*/
width: 100%;
position: fixed;
margin: 0 -8px;
}
#menufiixubpd li {
list-style: none;
display: initial;
padding-right: 65px; /*-----distância entre os itens do menu---*/
}
#menufiixubpd li a {
color: #FFFFFF; /*-----cor da fonte---*/
text-decoration: none;
display: initial;

}
Edite apenas onde indica o que cada coisa faz. Novamente use a tabela de cores para mudar as cores como prefere, e também mude a fonte. E pronto, seu menu fixo está feito!

Agora vamos paro o cabeçalho... Há duas formas de aplicar um cabeçalho ao layout, uma sem usar códigos (a que eu uso) e outra mexendo nos códigos, um pouco mais difícil para quem ainda não sabe mexer bem, mas vou ensinar as duas formas.

Cabeçalho centralizado sem usar HTML


Esse primeiro que irei ensinar é bem simples de fazer e é o que eu uso: cabeçalho centralizado sem usar html. Antes de tudo você precisa criar o seu cabeçalho, e não precisa ser da largura total do seu blog, já que o cabeçalho ficará centralizado. A largura total do meu blog é de 1090px, e eu uso uma base png (transparente) de 1000px de largura e 400px de altura. Deixarei ela aqui como base, você não a verá mas ela está logo abaixo, coloque o mouse em cima e baixe:


Para criar um cabeçalho do seu gosto é necessário um editor de fotos, eu uso o Photoscape v3.7, mas se você não tiver nenhum instalado pode usar o Pixlr ou qualquer outro.
Após sua imagem pronta é hora de aplicá-la ao blog, essa parte é bem simples. Vá em layout > No gadget Cabeçalho > Clique em Editar.


Irá abrir outra janela, nela clique em escolher arquivo, selecione a imagem desejada, nas opções que aparecem deixe marcado "Em vez de titulo e descrição" e "Reduzir para ajustar". Feito isso, salve e visualize se está a seu gosto!
Veja agora como eu faço o meu, o fundo branco que você está vendo é a base png, nos editores ela fica assim. Note que eu deixo espaço na parte inferior, no lado esquerdo e no direito:


Faço isso porque eu quero que fique bem centralizado, e uso a imagem em 1000px mesmo, na hora de aplicá-la eu não deixo a opção "reduzir para ajustar" marcada, mas isso depende de você.

Cabeçalho ocupando toda a largura do blog usando html


Esse segundo modo o cabeçalho toma conta de toda a largura do blog, para isso é necessário criar uma imagem com a largura total do seu blog e hospedá-la. Caso não saiba onde hospedar uma imagem, é só criar uma postagem de rascunho, adicionar a foto em tamanho original, dá um clique com o mouse, clicar com o lado direito e copiar sua URL.
Nessa parte é necessário também hospedar um background, e não esqueça de remover o background que adicionamos lá no começo do tutorial!
Vá em "Modelo" > "Editar HTML". Expanda a setinha, clique Ctrl+F e procure por:
body {
Você vai encontrar o seguinte código:
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}
Substitua por:
body {
padding:0px;
margin:0px;
background: url(" LINK  DO CABEÇALHO ") no-repeat; }
html {
background: url(" LINK  DO BACKGROUND ") repeat; }
 Substitua "link  do cabeçalho" pelo link do seu cabeçalho e "Link do background" pelo link do seu background. Visualize e salve!

Ficou enorme, né? Peço que façam tudo com calma, leiam bem cada parte para não haver erros.
Eu demoro postar pois cada letrinha errada no código buga tudo, por isso reviso e testo novamente para ter certeza que não vai dar erros!
Essa foi a segunda parte, logo voltarei com terceira e vamos continuar personalizando. Qualquer dúvida ou sugestão é só deixar nos comentários!

BEIJOS 

Leia também: Como personalizar um Layout passo a passo - Parte 1

12 comentários:

  1. Muito bom seu passo a passo flor!
    Parabéns pelo post!

    http://areafeminina.com/

    ResponderExcluir
  2. Adorei nanda bem explicadinho, o meu layout tive que colocar a mao no bolso porque nao dei conta e contratei uma design agora estou tentando modificar sozinha mesmo rs... quero colocar uma assinatura fixa com foto nos posts, la vai eu suar dinovo rs... adorei o post linda...bjao e bom fim de semana :*
    http://festadasunhas.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Aos poucos você consegue, só não desiste, ta?
      Muito obrigada. Ótima semana pra nós! ♥

      Excluir
  3. Amei seu post Nanda, sempre arrasando nas dicas amei!!
    Eu vou ter que ler tudo com muita atenção para tentar mudar algumas coisas, confesso que isso não é meu ponto forte, se fico muito tempo vendo esses códigos minha vista começa a embaralhar tudo kkkkk, não tem jeito mais vou tentar.
    Beijos Nanda!!!

    ResponderExcluir
    Respostas
    1. Pouco a pouco você começa se familiarizar com os códigos, é só ir praticando kkkk no fundo não são um bicho de 7 cabeças, viu?
      Muito obrigada, você consegue! ♥

      Excluir
  4. Gostei muito, parabénss! <3
    http://thainaferreira2411.blogspot.com.br/

    ResponderExcluir
  5. Nanda, você sabe como faz pra tirar o Attribution do Blog!?
    Se souber por favor coloca no próximo Post!
    Obrigadinho ♥

    ResponderExcluir
  6. Nanda, eu aqui de novo ='D
    Tipo eu to fazendo como você mandou mais eu queria fazer o meu próprio cabeçalho e toda vez que eu vou fazer (com a sua imagem) o fundo transparente vira preto!
    O meu computador não suporta um PhotShop, (só pra confirma faço tudo no Pixlr.com!) caso você souber indica no proximo Post...
    Obgadinho ♥

    ResponderExcluir
  7. Amei o tutorial, me ajudou muito! Mas os meus gadgets estão todos desorganizados, não consigo organizar. Sabe como me ajudar?

    ResponderExcluir

- Os comentários são de responsabilidade de seus respectivos autores!
- Não são permitidos links que redirecionam diretamente para um post, vídeo ou sorteio. Comente porque gostou e não para se promover. Comentários que contenham esse tipo de link serão removidos.
- Seu comentário é muito importante para o andamento do blog e é um grande incentivo para mim, deixe sua opinião, dica, elogio, critica (com fundamento) ou sugestão.
- Deixe APENAS o link do seu blog para que eu possa conhecer. Comentários cheios de links também serão excluídos.
- Não ofenda nem desrespeite ninguém.
- Deixe a opção "Notifique-me" marcada para ser notificado(a) quando eu responder seu comentário!