Um pouco sobre CSS e Mudando o fundo do seu template
Estou pensando em fazer uma série de postagens como fazer um template, mas para isso devemos aprender algumas coisas básicas. Como mudar a cor do fundo de um template? Como colocar uma imagem de fundo? É bem básico e simples.
Antes de começar a trabalhar aconselho que faça um backup de seu template, por segurança.
Aprendendo a trabalhar o CSS:
Devemos aprender que sempre que começa uma chave { tem que ter uma que termina } em um estilo CSS, e tudo que tem entre as duas chaves são as características (cores, fontes, tamanhos, posicionamentos, etc). E o que vem antes da chave { é onde essas configurações vão ser aplicadas.
Exemplo:
#testes {
testes: Local onde as configurações vão ser aplicadas.
{ … }: Características da tag testes (ou características do estilo)
A definição de cada característica vem depois dos dois pontos (:) e assim que ela acaba devemos colocar ponto e vírgula (;).
Exemplo:
Background: #FFFFFF;
Agora para usarmos as características da tag TESTES usamos isso:
<div id=’testes‘>TEXTO AQUI</div>
Obs.: Essa explicação é só para você entender um pouco como trabalhar o CSS do seu template.
Agora que você já sabe um pouco onde cada característica começa e termina, vamos mudar a cor do fundo do seu template.
1º – Faça login no Blogger, entre em: “Layout” -> “Editar HTML”;
2º – Procure (Ctrl + f) por:
body {Dentro das chaves de BODY tem o código CSS: Background, isso dá característica da cor de fundo.
Então apague as definições que estão na frente de Background e coloque o código da cor que você quer. Se não sabe o código procure aqui na tabela de cores: http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm
Exemplo de como vai ficar:
body {
Background: #000000;
...
}#000000: Cor escolhida para o fundo.
A cor usada no exemplo é a cor preta (#000000).
Obs.: Os três pontinhos significam que tem outras características.
3º - Teste e salve.
1º - Faça login no Blogger, entre em: “Layout” -> “Editar HTML”;
2º - Procure (Ctrl + f) por:
body {Dentro das chaves de BODY tem o código CSS: Background, isso dá característica da cor de fundo.
Então substitua todo background por:
Background: url (LINK DA IMAGEM AQUI);
Substitua LINK DA IMAGEM AQUI pelo link da imagem escolhida para usar no fundo do template.
- Se não quer que a imagem repita coloque:
Background: url (LINK DA IMAGEM AQUI) no-repeat;
- Se quiser colocar uma imagem que não repete e assim que ela acabar fica a cor que você quer, use:
Background: CÓDIGO DA COR AQUI url (LINK DA IMAGEM AQUI) no-repeat;
No lugar de CÓDIGO DA COR AQUI coloque o código da cor desejada.
Exemplo:
Background: #000000 url (LINK DA IMAGEM AQUI) no-repeat;
- Se quiser que tenha uma cor e a imagem se repita apenas na horizontal use:
Background: CÓDIGO DA COR AQUI url (LINK DA IMAGEM AQUI) repeat-x;
- Se quiser que tenha uma cor e a imagem se repita apenas na vertical use:
Background: CÓDIGO DA COR AQUI url (LINK DA IMAGEM AQUI) repeat-y;
Encontre o Código de várias cores aqui: http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm
3º - Teste e salve.
A postagem ficou um pouco grande, mas tentei explicar bem detalhadamente como fazer as mudanças, qualquer coisa deixe um comentário com sua dúvida a respeito.
Abraços
Ficou muito bom Paulo!
Concerteza estarei ancioso para acompanhar seus posts ensinando a criar um template!
Por falar em cor, eu gostei assim, eu detestava aquele amarelo que voce usava.
Seu blog ficou mais leve 🙂
Meu problema é quando quero posicionar a imagem em algum local.
Tipo a esquerda em cima, a direita abaixo, etc.
Muito obrigada!!! Muito boa sua aulinha, me ajudou pacas!!! valeu mesmo.
Realmente ficou muito bem explicado, já tentei de várias formas mudar aumenos a cor do fundo do meu blog, com outras explicações e tutoriais mais só aqui deu certo, Parabéns.
Belo post Paulo, sempre mudei umas coisinha no meu template mas sem saber nada, ia "chutando", mudava e visualizava pra ver se deu certo, rsrs, mas agora vc esta ajudando bastante, vlw, queria aproveitar pra deixar um pedido, uma vez a Juliana falou que ia postar mas acho q nao postou, ou eu nao achei la [DB], como por um banner no cabeçalho do blog, igual vc tinha no template anterior, se tiver como tbm no tutorial, usando um codigo para banner rotativo q a Juliana postou a algum tempo no DB, espero que não esteja atrapalhando, até…
Esse post ficou show de bola,a muito tempo queria entender como colocar fundo no blog,agora fiquei satisfeito,otimo post,muito bem explicado.
Abraço
http://www.massariolles.blogspot.com
Ola Paulo vim perguntar como você coloca Drag e Drop em um blog, este codigo e quue voce clica numa caixinha e é como "minimizar" o arquivo e o drag é como "mover"
Eu queria saber, como colocar isso no Blog?
;))
:))
@Augusto…
onde viu isso?
Muito bom!Estava querendo fazer a mudança do fundo do meu blog faz tempo.
Vc é um genio eu fui em varios tutorias e nao cansegui. acabei com me blog e tive que fazer outro vlw msm
Exelente seus posts vc esta de parabens,adorei tudo que li achei objetivo.chef glima
nossaaa, adorei, eu to procurando por esse tutorial o dia todo x.x
fiz um monte de meleca no meu layout "/ agora to tentando fazer o certo xD
;**
bjinhus
e parabens
como voce explicou acho dificio ter duvidas …
creio que estou comesando a entender como fuciona esse codigos…
abraço
De volta a escola! 😀
Está muito bom esse tutorial !
no meu deu certo,mas no Internet Explorer a imagem não aparece e ainda por cima a cor de fundo fica em branco
@Internético,
Isso é o padrão dos navegadores. Background não costuma dar erro em nenhum.
O que você deve ter feito é tipo no final ter colocado assim:
(linkimagem.jpg)no-repeat;
Isso está errado. Lembre-se de colocar um espaço antes de no-repeat.
Ficando assim corretamente:
(linkimagem.jpg) no-repeat;
Sem o espaço da erro no IE. =]
Como POr esse Menu?
uma duvida, a imagem precisa ser de algum servidor de imagens, tipo flickr ou imageshack?
ou pode ser uma do google imagens?
@Vinicius tem que ser de um servidor. Pois se você usar do Google Imagens você estará usando de um servidor de outro blog e/ou site. Isso é errado, além de que o dono pode muito menos apagar a imagem.
Ótimo
muito bom 🙂
Ficou ótima a explicação muito bom
Valeu pelas dicas!
Muito bom, muito útil.
Ótimo e belo site!
http://www.cogumelando.com.br
Muito bom mais eu gostaria de +/- isso o meu blog ja tem um fundo mais gostaria de colocar varios fundos em ordem ou em aleatorio (tanto faz ) gostaria de toda vz que o blog for atualizado ele mude o plano de fundo do blog , eu gostaria de saber o comando para eu poder fazer isso (colocar fundos aleatorios ao atualizar o blog (f5) VLW
@Loading,
Use JavaScript. Dá pra fazer isso.
Obs.: Eu não tenho esse tipo de código pronto.
[]s
E como faço para colocar a imagem de fundo só nas laterais?Pois quando faço isso fica no blog todo.Ex:coloquei estrelinhas piscando para ficar só nas laterais do fundo,mas elas ficam em tudo.
amei , obrigada ! 😉
Vlw, por tirar minhas duvidas, agora preciso de uma dica, de como montar uma template para blog.
vc dá ótimas dicas..já pensou em fazer vídeos para internet?
Obrigada…post mais coisas sobre css e html a gente agradece…abçs
Obrigado Di Oliveira!! =]
Já pensei sim, mas no momento não dá, mas quem sabe logo logo?
abração
Paulo gostei muito do artigo, mas ainda não consegui fazer uma pequena alteração no meu blog. Preciso mudar a cor do fundo dos posts e dos widgets mas não consigo. já tentei tudo e mudei muitas coisas, mas isso não consigo fazer. Se puder me ajudar.. agradeço muito. Bruno
Bruno,
estude CSS e HTML. Isso é básico.
abraços
amigo gostaria de saber como deixar o fundo do meu site c a imagem e os textos na parte q rola transparente mostrando so a imagem de fundo. obrigado
boa noite,
cara baixei um template e gostaria de modificar principalmente a imagem do fundo porém não encontrei o Background nem o url da imágem. Tem como alterar sem essas opções?