Dominio: codigosblog.com.br
Chave: af255c39c6cbf2ba03ac5b531649215539d8d61a
Hora do cache: 1484568950
Vida do cache: 1485864946
Status: 1
Mensagem: Licença válida
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 layouts

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 {

Color: #000;
Background: #fff;
Border: 2px solid #c1c1c1;
Font-size: 12px;
Padding: 5px;
}

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.

Se quiser colocar uma imagem de fundo siga em frente

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



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:

36 Comentários

  1. Rafael Silveira disse:

    Ficou muito bom Paulo!
    Concerteza estarei ancioso para acompanhar seus posts ensinando a criar um template!

  2. Iara disse:

    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.

  3. Vivi's Rodrigues disse:

    Muito obrigada!!! Muito boa sua aulinha, me ajudou pacas!!! valeu mesmo.

  4. ALCB disse:

    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.

  5. lardaveterinaria disse:

    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é…

  6. Rodrigo disse:

    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

  7. Augusto Sousa disse:

    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?

  8. Paulo Estevão disse:

    ;))

  9. Paulo Estevão disse:

    :))

  10. Paulo Estevão disse:

    @Augusto…
    onde viu isso?

  11. Jonathan disse:

    Muito bom!Estava querendo fazer a mudança do fundo do meu blog faz tempo.

  12. Luisa disse:

    Vc é um genio eu fui em varios tutorias e nao cansegui. acabei com me blog e tive que fazer outro vlw msm

  13. Gi... disse:

    Exelente seus posts vc esta de parabens,adorei tudo que li achei objetivo.chef glima

  14. Maísa Alice disse:

    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

  15. Jhony Nunes disse:

    como voce explicou acho dificio ter duvidas …
    creio que estou comesando a entender como fuciona esse codigos…
    abraço

  16. Edson disse:

    De volta a escola! 😀
    Está muito bom esse tutorial !

  17. Internético disse:

    no meu deu certo,mas no Internet Explorer a imagem não aparece e ainda por cima a cor de fundo fica em branco

  18. Paulo Estevão disse:

    @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. =]

  19. †µℓเ๏๏ .†.קαiм- disse:

    Como POr esse Menu?

  20. Vinicius Chargel disse:

    uma duvida, a imagem precisa ser de algum servidor de imagens, tipo flickr ou imageshack?

    ou pode ser uma do google imagens?

  21. Paulo Estevão disse:

    @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.

  22. Administrador disse:

    muito bom 🙂

  23. Matheus Gambati disse:

    Ficou ótima a explicação muito bom

  24. Pedro Casanova disse:

    Valeu pelas dicas!
    Muito bom, muito útil.
    Ótimo e belo site!

    http://www.cogumelando.com.br

  25. Loading... disse:

    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

  26. Paulo Estevão disse:

    @Loading,
    Use JavaScript. Dá pra fazer isso.
    Obs.: Eu não tenho esse tipo de código pronto.
    []s

  27. CRISTAL disse:

    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.

  28. Loukuras Teen disse:

    amei , obrigada ! 😉

  29. max ytetsu disse:

    Vlw, por tirar minhas duvidas, agora preciso de uma dica, de como montar uma template para blog.

  30. Di Oliveira disse:

    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

  31. Bruno disse:

    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

  32. ricardinho disse:

    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

  33. 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?

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

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