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.
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. 😉
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
Muito bom! é isso que a blogosfera precisa, tudo prático e se torna mais fácil com sua explicação, valeu.
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
Muito bom, da última vez que tentei usando um outro tutorial me bati, agora consegui colocar um cabeçalho tranquilamente.
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!
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.
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
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 …
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
@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.
@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. =[
muita boa essa dica, gostei muito…
parabéns cara.
flws…
a minha imagem ficou com um espacinho entre ela e o Outer… como faço pra diminuir esse espaço?
Comecei.. configurei tudo certinho mas nao sei o que houve =/
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
Consegui!!! ^^
Muito obrigada.. eu tinha mesmo esquecido de colocar uns codigos rsrs agora ficou legal, nossa obrigada mesmo!!!
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
da pra criar o cabeçalho no corel?
@Vinicius,
Não importa como você crie e sim o resultado final.
Nao seria mais facil ir em "Layout", "Elementos da página" e depopis clicar em "Editar" no cabeçalhao?
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;
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
*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.
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
@Ana,
procure aqui no Códigos Blog por link com imagem.
Acho que é isso que você quer.
ooi , eu nao to conseguindo encontrar os testos , fica dizendo 'TESTO NÃO ENCONTRADO ' mee ajuuda :s
O meu não encontra esse primeiro codigo, nem o segundo e eu fiz tudo certinho passo a passo da 1 lição.
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 !
@Rickzinhocps,
Coloque a imagem no body do template.
Tipo:
body {
background: url();
}
Nao consigo, help!!!!!
http://kpriche.blogspot.com/
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…
@Bruna,
não sei. Só olhando o código pra saber.
até mais.