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.