Dominio: codigosblog.com.br
Chave: af255c39c6cbf2ba03ac5b531649215539d8d61a
Hora do cache: 1500849056
Vida do cache: 1500892256
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Blogs,
SEO e Monetização.

Hospedagem - 728 x 90

Criando um template

Fazendo seu template – Parte 2 – Criando um topo com imagem

Vamos continuar com nossa seria de como fazer um template para Blogger. Para ler todas as postagens da serie clique aqui
 
Parte 2 – Criando um topo para seu blog usando uma imagem.

Não tenho dúvidas que é muito melhor um blog com um topo desenhado, trabalhado, ou com um simples logotipo que identifique o blog. Isso faz seu blog ficar bem mais profissional do que usando um simples escrito com o nome do seu blog no topo (header). Então vamos aprender a substituir esse escrito por uma imagem.

1º – Entre em “Layout” -> “Editar HTML”.

2º – Procure (Ctrl + f):

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Só testes! (Cabeçalho)' type='Header'/>
</b:section>

Apague tudo!

Depois encontre:

#header {
width: 760px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

h1.title {
padding-top: 38px;
margin: 0 14px .1em;
line-height: 1.2em;
font-size: 100%;
}

h1.title a, h1.title a:visited {
color: $headerTextColor;
text-decoration: none;
}

#header .description {
display: block;
margin: 0 14px;
padding: 0 0 40px;
line-height: 1.4em;
font-size: 50%;
}

E apague tudo também. Teste, se topo saiu completamente e está mais ou menos igual a imagem abaixo, salve.

Assim, acabamos de deletar o antigo topo e suas configurações.

3º – Precisamos criar o topo do blog, para isso vamos editar a div “header-wrapper”, então encontre:

#header-wrapper {

Apague:

background-color: $headerCornersColor;
text-align: $startSide;
margin:0;

Onde background era a cor do fundo, text-align era o tipo de alinhamento do texto e margin é a margem da div.

Agora vamos criar nossas próprias configurações. Use: widght para definir a largura, height para definir a altura e margin para definir a distância do topo das laterais. Caso queira adicionar outros efeitos, procure na web algo mais, porém isso não é necessário.

Vou usar no exemplo:

width: 980px; 
background: url(http://codigosblog.net/blogs/serie/header.jpg) no-repeat;
height: 180px;

Onde background: url(...) no-repeat vai a imagem do topo (usando uma imagem já hospedada), colocamos também 180px de altura (height) e 980px de largura (width).

Teste e salve.
Seu template deve estar parecido com esse:

Seja criativo, crie uma imagem moderna, evite letras grandes de mais e muitos paparicos.

Espero que essa seria ajude muito a todos. Aguardem mais postagens.
Até mais.



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

33 Comentários

  1. Weverton Guedes disse:

    Muito bom post!
    Com sua explicação o aprendizado se torna mais fácil e prático.

    Iria pedir ajuda para a criação de um bom cabeçalho. Precisaria do tamanho, fontes para o nome, onde fazer(que software?), essas coisas…Mas como vejo que você já esta se esforçando demais em ajudar nós blogueiros, então nem vou te pertubar. 😉

  2. Paulo Estevão disse:

    Weverton, aos poucos vou dando as dicas. Prometo.

    Mas use o photoshop, é muito bom e tem vários e vários tutorias na web. Só procurar que você acha.
    abraços

  3. estudiodicas disse:

    Muito bom! é isso que a blogosfera precisa, tudo prático e se torna mais fácil com sua explicação, valeu.

  4. Chakaols disse:

    muiiiitooooo obrigado!!!! THANKS!!
    Eu tava tentando criar um template mas quando chegava na parte da criação do topo eu tava me batendo…agora eu já sei graças a vcs.
    nunca ia imaginar q tinha q excluir td p criar um topo novo kkkk…vlw

  5. Luciano disse:

    Muito bom, da última vez que tentei usando um outro tutorial me bati, agora consegui colocar um cabeçalho tranquilamente.

  6. Fabrizio Malta disse:

    hum, muito legal essa série de tutos de como fazer um template. Tava querendo fazer um novo e estou seguindo esses daqui. Muito legal, parabens!

  7. Lella disse:

    gostaria de saber se ao invés de usar uma imagem hospedada em algum site, tem como usar uma foto do meu pc em jpg.

  8. bloggernaweb disse:

    Olá, Paulo.

    Estou acompanhando essa série é ela está sendo excelente para o meu aprendizado. Coloquei essa dica que você nos forneceu lá no meu blog e ficou muito bom.

    Só que aconteceu uma coisa que se não sei se é normal: a opção de um link na imagem desapareceu. Isso é normal?

    Grande abraço.

    Idenaldo

  9. jjd disse:

    cara to mais perdido que cego em tiroteio.. to aprendendo a criar um blog tenho apenas navegado e postados coisas que acho que são interessentes mais nada de novo. ajuda ai vai …

  10. Sistika disse:

    Oiiiiiiiii nao deu certo aqui.. quer dizer, o topo ficou lá, mas ficou faltando um pedaço no canto direito. Ficou vazio. Olha só, se puder.

    http://sistikas-life.blogspot.com/

    Se puder me ajudar, por favor, me ajude.. rs

  11. Paulo Estevão disse:

    @Lella,
    você tem que hospedar essa imagem em algum servidor e pegar o link, indico o http://imageshack.us/

    @bloggernaweb,
    Se for o link do topo, sim é normal.

    @jjd,
    estou ensinando passo a passo.

    @Sistika,
    provavelmente o tamanho da imagem não bate com o tamanho que recomendei.

  12. Paulo Estevão disse:

    @Sistila,
    Vi seu blog, você não começou o template da parte 1, certo?

    Se você não começar da parte 1, não vai bater nada. =[

  13. Neto disse:

    muita boa essa dica, gostei muito…

    parabéns cara.

    flws…

  14. Sistika disse:

    a minha imagem ficou com um espacinho entre ela e o Outer… como faço pra diminuir esse espaço?

  15. Sistika disse:

    Comecei.. configurei tudo certinho mas nao sei o que houve =/

  16. Sistika disse:

    Mas tipo isso daí é mó legal. só que to tentando centralizar agora a imagem hehe

    O padding eu apaguei e só deixei o que vc colocou ali em cima mesmo, mas agora a imagem ta pro canto esquerdo.. se puder me ajudar eu agradeço. Sou enrolada rsrsrs

    Parabéns pelo site hein

  17. Sistika disse:

    Consegui!!! ^^

    Muito obrigada.. eu tinha mesmo esquecido de colocar uns codigos rsrs agora ficou legal, nossa obrigada mesmo!!!

  18. ibinet disse:

    Estou com um problema em meu blog. Quando aumento e diminuo o zoom do navegador os objetos todos saem das sidebar e fica horrível.
    Será que vc poderia me dar alguma dica.
    dê uma olhada ai…
    http://www.ibinet.blogspot.com
    http://www.ibinetinformatica.com

    email – msn- cleilson2005@hotmail.com

  19. Vinicius Chargel disse:

    da pra criar o cabeçalho no corel?

  20. Paulo Estevão disse:

    @Vinicius,
    Não importa como você crie e sim o resultado final.

  21. Júh disse:

    Nao seria mais facil ir em "Layout", "Elementos da página" e depopis clicar em "Editar" no cabeçalhao?

  22. Gossip Girl disse:

    eu ñ encontrei isso q está em baixo pode me ajudar a encontra

    #header {
    width: 760px;
    margin: 0 auto;
    background-color: $headerBgColor;
    border: 1px solid $headerBgColor;

  23. Flores e Flores disse:

    Olá Pessola, acho que fiz alguma coisa errada, minha imagem não ficou centralizada, será que alguem poderia me ajudar? Dêem uma olhada aqui http://aprendendoablogarflores.blogspot.com

  24. bia castelo branco disse:

    *me intrometendo*

    Júh, sim seria mais fácil, mas não se teria o resultado desejado. Quando se coloca uma imagem pelo cabeçalho fica um espaço entre o header(imagem do topo) e o body(basicamente onde fica os posts) se voce quiser esse feito então tudo bem, mas nesse tutorial o Paulo quis juntar o header com o body.

  25. Ana Polidoro disse:

    Olá! Tenho um template, mas na imagem hospedada já possui o nome do blog, ou seja, não quero utilizar o "cabeçalho" que o blogspot fornece.
    Mas! (sempre tem um mas :() por não estar usando o mesmo, do blog, eu acabei ficando sem poder clicar no título (no topo) e redirecionar a página pra minha "home" do blog.

    ENFIM, tem como transformar a imagem hospedada (a do template) em link e colocá-la no HTML? Pra funcionar como link, tbm?

    (deu pra entender? rs, nãoentendo muito disso… mas aqui é o blog, se quiser dar uma olhada pra ficar mais fácil!:
    wwww.stylismoeco.blogspot.com

    Obrigada!
    Segue o e-mail pra responder (fica mais fácil pra eu ler :S, mas você que sabe:))
    stylismo.co@hotmail.com

  26. Paulo Estevão disse:

    @Ana,
    procure aqui no Códigos Blog por link com imagem.
    Acho que é isso que você quer.

  27. Mari Mari *-* disse:

    ooi , eu nao to conseguindo encontrar os testos , fica dizendo 'TESTO NÃO ENCONTRADO ' mee ajuuda :s

  28. Rickzinhocps disse:

    O meu não encontra esse primeiro codigo, nem o segundo e eu fiz tudo certinho passo a passo da 1 lição.

  29. Rickzinhocps disse:

    Olá Paulo,
    Bom eu gostaria de saber como eu faço pra colocar uma imagem no cabeçalho tomando todo o topo do template, tipo aqui no codigosblog que tem o fundo do windows7 e o logo do blog ! (obs: Nesse fundo e no logo não é um cabeçalho ja é parte do template né) …
    Espero que tenha dado pra entender !

  30. Paulo Estevão disse:

    @Rickzinhocps,
    Coloque a imagem no body do template.
    Tipo:

    body {
    background: url();
    }

  31. Bruna disse:

    eu não consigo colocar minha imagem no cabeçalho ;s. http://2.bp.blogspot.com/-nVa6cS_g3yI/TptuFA5rTSI/AAAAAAAAAD4/7j08HU2tsHU/s1600/template+do+blog.png É problema com a formatação ou o quê? Demorei tanto pra fazer…

  32. Paulo Estevão disse:

    @Bruna,
    não sei. Só olhando o código pra saber.
    até mais.

Para enviar seu comentário, preencha os campos abaixo:

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.