Oi oi Galera!!
Após
conhecermos a base do Blogger, vamos dar início à criação do nosso Template.
Esse tutorial será longo, então o dividirei em várias partes. Peço que leiam tudo
com atenção e vejam todas as imagens do post.
Adicionar um Background ao nosso Template!
Uma
das coisas mais fáceis de fazer no template é adicionar background, que pode
ser uma imagem ou uma cor, por padrão, o Minima apresenta apenas uma cor predominante,
que é o branco. O branco foi a cor escolhida para o fundo do template e já que
as partes principais do template não possuem variáveis de background, o branco
tornou-se a cor padrão para todo ele.
Na
definição das variáveis encontramos apenas uma destinada ao background, que é a
variável "bgcolor". Veja:
O
branco pode ser alterado facilmente por qualquer outra cor ou imagem de sua
preferência. Se quiser que o background seja apenas uma cor, altere o #FFFFFF
na variável pelo código hexadecimal da cor desejada (no fim do post eu vou
deixar o site que uso para escolher minhas cores). Para adicionar uma imagem
como background do template, procure pelo seguinte código:
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small
Georgia Serif;
font-size/*
*/:/**/small;
font-size:
/**/small;
text-align: center;
}
Para encontrá-lo vá ao seu modelo HTML e clique dentro da caixinha de códigos, e clique em Ctrl+F, e dentro da caixinha de texto que aparecerá no cantinho digite body {
Em
background apague o seguinte código:
background: $bgcolor;
e cole o código:
background: url("link da sua imagem")repeat fixed;
link da sua imagem: é onde você colocará o link da sua imagem escolhida, você deverá escolher uma imagem e eu o aconselho a hospedá-la no google mesmo, abrindo uma aba extra no seu navegador,indo no seu painel do blogger > layout > adicionar gadget > imagem > "escolher arquivo".
Depois de feito todo esse caminho, não salve o Gadget, apenas vá na imagem e clique com o botão direito do seu mouse, e clique em "copiar URL da imagem", depois volte ao seu código e substitua a frase " link da sua imagem" selecionando-a e colando o URL, lembre-se de notar se o link está dentro de aspas.
repeat: é o comando usado para que a imagem se repita em todo o fundo do seu blog.
obs.: se você que que a imagem se repita apenas na horizontal coloque repeat-x
se você quer que a imagem se repita apenas na vertical coloque repeat-y
fixed: faz com que a imagem fique fixa e não se mova junto com o template conforme você rolar a página.
Após
isso, clique em Visualizar.
Quando você clicou em visualizar você viu o seu background, porém tudo fico transparente com o background aparecendo em todas as áreas, né? Calmaa!! Não se desespere, é pra isso acontecer mesmo, e não se preocupe, e facinho de ser resolvido apenas procure pelo seguinte trecho no código, usando a técnica do Ctrl+F você procurará por /*Outer-Wrapper
Após procurar por /*Outer-Wrapper
deverá aparecer o seguinte código:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font:
$bodyfont;
}
#main-wrapper {
width: 410px;
float:
$startSide;
word-wrap:
break-word; /* fix for long text breaking sidebar float in IE */
overflow:
hidden; /* fix for long non-text
content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float:
$endSide;
word-wrap:
break-word; /* fix for long text breaking sidebar float in IE */
overflow:
hidden; /* fix for long non-text
content breaking IE sidebar float */
}
Para solucionar o nosso problema apenas iremos adicionar uma cor de fundo para essas áreas.
Obs.:
• Se
adicionarmos uma cor de fundo no #outer-wrapper ela ficará em todo o template,
pois essa área abriga as demais.
• Se
adicionarmos uma cor de fundo no #main-wrapper e na #sidebar-wrapper as demais
áreas (header, footer e outter-wrapper) não terão cor, e sim a imagem do
background.
Vamos
adicionar background: #FFFFFF; antes do fechamento de chaves apenas nas áreas
desejadas. No meu caso, eu irei adicionar cor na sidebar (área de gadgets) e na
área dos posts, mas você pode escolher qual o melhor para você.
Adicionando
a cor, o código ficará assim:
#main-wrapper
{
width: 410px;
float: $startSide;
word-wrap:
break-word; /* fix for long text breaking sidebar float in IE */
overflow:
hidden; /* fix for long non-text
content breaking IE sidebar float */
background: #FFFFFF;
}
#sidebar-wrapper {
width: 220px;
float:
$endSide;
word-wrap:
break-word; /* fix for long text breaking sidebar float in IE */
overflow:
hidden; /* fix for long non-text
content breaking IE sidebar float */
background: #FFFFFF;
}
e meu blog ficará assim:
Após
isso, visualize o modelo.
Se você tiver adicionado a cor apenas nessas duas
áreas, assim como eu, provavelmente, notou que o texto das postagens e
da sidebar estão muito perto das margens, como nessa imagem. Para corrigir
isso vamos dar um espaço entre a borda das áreas e os textos usando a
propriedade do CSS "padding".
Adicione
padding:10px; no código referente às postagens e padding:7px; no código
referente à sidebar. Os códigos ficarão assim:
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
background: #FFFFFF;
padding:10px;
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
background: #FFFFFF;
padding:10px;
}
Agora visualize
e veja que agora há um pequeno espaço entre as bordas e os textos. Após essa
alteração, a sidebar do seu blog poderá se desalinhar ficando abaixo da altura
dos posts,(assim como a próxima imagem) mas não precisa se preocupar em relação a isso.
No próximo post vamos ajustar as larguras do template para deixar tudo alinhadinho, e certinho.
Vamos rever o que aprendemos hoje?
Aprendemos à colocar um Background no blog, a colorir a #Outer-wrapper, #Main-wrapper e a #Siderbar-wrapper, e a colocar espaçamento entre a borda o conteúdo interno da wrapper.
Se gostou do Tutorial deixe seu comentário ai embaixo, o seu comentário serve de incentivo para que haja continuação!!
Se ficou alguma dúvida, ou se você fez e o seu não deu certo, pode deixar sua pergunta nos comentários, responderei e resolverei seu problema o mais rápido possível!!
Links extras:
Template usado para o tutorial: Minima Blogger
Paleta de cores hexadecimais: Cores para HTML
XoXo
0 comentários:
Postar um comentário