O Dicas e Templates Mamanunes nasceu da minha necessidade de registrar as descobertas que faço enquanto aprendo a desenhar templates para a plataforma Blogger. Compartilho aqui alguns truques, templates e informações que considero úteis para blogueiros e curiosos. Entre e fique a vontade. 
Se você quer fazer uma mudança em seu template, vou dar aqui está algumas sugestões bem simples. Background é o plano de fundo do blog (template) e pode ter a cor, desenho ou textura que você quiser. Então vamos aprender a fazer isso, lembrando que nos baseamos no código do modelo "Minima"co Blogger. IMPORTANTE: Antes de fazer qualquer alteração em seu template, faça um backup (uma cópia) do atual para não perder tudo em caso de acidente.
Acesse a página do Blogger,
Faça login, clique em "Layout"
clique em "Editar HTML"
Esse é o código que define a cor de fundo do seu template e pode ser alterado dentro do editor de fontes e cores em sua página "Layout".
Como colocar um desenho ou textura como fundo?
Encontrei uma solução bem prática no Background Labs . O site oferece vários modelos, lindos e grátis e com o endereço da imagem (Url) .
Vamos aprender a colocar? Acesse o site e na página inicial escolha a cor ou estilo:
Neste exemplo optei pelo modelo: "Most Popular"/ "Sky Background- 01"
Clique no modelo escolhido e será direcionado para a página onde o site oferece o endereço da imagem (Url)
Copie o endereço "Image URL"
Vá em "Editar HTML" e procure o trecho:
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
Cole o código URL no lugar indicado em negrito. Cuidado para não apagar nenhum ponto e vírgula, senão não vai funcionar.
Tem que ficar assim:
background: url (ENDEREÇO DA IMAGEM) repeat top left;
Clique "Visualizar" e se estiver tudo bem, "Salvar".
É isso.
Se quer um background com efeito degradê, acesse aquí e veja o tutorial com 10 modelos.
Caso queira tirar alguma dúvida, ecreva nos comentários ou por email;.
Se deseja um trabalho personalizado, preencha o formulário de contato.
Obs.: Tutorial atualizado em 13 de março de 2010
31 comentários
Só posso comentar que este post é 10. O crescimento de pessoas com blogs é imenso e a proporção de não saber realizar mudanças neles tem o mesmo tamanho, então estas dicas só vem facilicar.
Eu bebo desta fonte.
bjks
Cristiane
Mama, simplesmente "transmimento de pensação". Queria fazer isso há tempos e até imaginava como fazia. O negócio agora é testar pra ver se funciona (esteticamente falando). Beijos, querida!
Obg pelas dicas vou experimentar e colocar no meu blog uma inf que aqui recolhi com o seu endereço obviamente...
Topa Parceria?
Olá!
Você foi indicado para participar do Prêmio Opus 2009 pela euipe do Prêmio Opus.
Para saber mais sobre o prêmio, acesse o seguinte link:
http://premioopus.blogspot.com/2009/02/sobre-o-premio.html
Para saber como funciona o Prêmio Opus, acesse o link:
http://premioopus.blogspot.com/2009/02/como-funciona.html
Para saber como participar do Prêmio Opus, acesse o link:
http://premioopus.blogspot.com/2009/02/premio-opus-2009.html
Ou leia o tutorial abaixo:
A equipe Opus indica 5 blogs para começar a participar do prêmio. São eles:
1- Canal dos Vídeos canaldosvideos.blogspot.com (concorrendo à categoria "blogs de vídeos")
2- Mundo Cincer (concorrendo à categoria "blogs de downloads")
3- Humor na Informática (concorrendo à categoria "blogs de humor")
4- Olhar do Futuro Digital (concorrendo à categoria "blogs de informática")
5- Dicas para Blogger (concorrendo à categoria "blogs de dicas")
OBS: todos os blogs indicados concorrem à categoria de melhor blog.
Agora estes blogs deverão seguir as seguintes instruções:
1- Postar em seu blog a imagem do Prêmio Opus junto com o link de quem o indicou;
2- Escolher 5 blogs para participar do prêmio colocando-os junto na postagem com o link para o blog juntamente com a categoria a qual o blog se encaixa (humor, informática, etc);
3- Avisar os blogs que estão participando do Prêmio Opus e repassar estas mesmas instruções para eles;
4- Adicionar estas instruções à postagem do prêmio;
5- Avisar a equipe do Prêmio Opus pelo e-mail "premio.opus@hotmail.com" quais os seus blogs indicados.
Imagem do prêmio a ser exibida:
http://1.bp.blogspot.com/_U08c2mqFgJg/SaH5uH8xmJI/AAAAAAAAABM/yt9Zdll4S-U/s1600-h/Pr%C3%AAmio+Opus+Logo.bmp
As indicações para o prêmio começam no dia 23/02 e terminam no dia 23/04 do ano de 2009.
Boa sorte!!
eu nao consegui fazer isso :c
será que me pode ajudar?
é que no meu codigo n aprecia a cor lá por isso eu apenas acrescetei o link do fundo mas não sei se está certo.
o código que pus:
body {
background:$bgcolor;http://www.backgroundlabs.com/backgrounds/89.jpg repeat right;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
bjo
Olá Valentine!
Respondi por email mas vou esclarecer aquí também.
Você colocou
background:$bgcolor;http://www.backgroundlabs.com/backgrounds/89.jpg repeat right;
troque por:
background:$bgcolor url(http://www.backgroundlabs.com/backgrounds/89.jpg) repeat right;
Qualquer problema volte a contactar.
Meninaa, deu certo finalmente, eu tentei tantoo.
mama como coloco a imagem no fim da pagina(o meio branco e um degrade verde no final na pagina) obriga vc ajuda muita gente...
Olá, parabéns pela ajuda enorme que você dá. Acompanho suas ajudas, mas sinceramente não consigo alterar o html para pôr um backgraound no meu blog. O que posso fazer?
Agradeço a ajuda.
Abração.
parabens me ajudou muito
Excelente dica mamanunes, parabéns!!!
oi
Será que vc me pode ajudar.
No meu blog aparece assim:
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Onde devo cologar a url ???
Obrigada
Oi,
Já fiz o procedimento que você apontou no post, mas mesmo assim o fundo do blog (blogger) continua branco. No que posso ter errado?
O meu layout é daqueles prontos do blogger, com algumas alterações minhas (imagem no cabeçalho, etc).
Coloquei no body do (x?)html a url entre paretenses e dei dois espaços pra escrever 'repeat;'.
O novo blogger nao aceita texturas??
Obrigada desde já!
Oi, Mama
O que faço pra imagem ficar fixa na tela?
É uma textura minha mesmo.
Valeu!
Olá,Gostaria de agradecer por ter respondido meu post. Consegui colocar o background, finalmenteeeee!!
Somente gostaria de salientar uma dúvida que outros possam ter: NO MOMENTO EM QUE FUI COLOCAR O LINK NO MEU HTML APARECIA "BACKGROUND COLOR" : BLABLABLA...EU TIVE QUE TIRAR A PALAVRA COLOR PARA FUNCIONAR, DEIXANDO ESCRITO APENAS BACKGROUND, ok?
É isso, muito obrigado de novo. Abraço
Olá, eu consegui colocar tudo, mas fiquei com uma dúvida, tem como colocar um quadrado branco, para a parte dos posts etc?
tem como colocar o texto "ticado" de preto??
olá, gostaria de uma ajuda, eu consegui fazer tudo certo, porem keria uma ajuda numa coisa,como eu coloco opacidade no plano de fundo? o plano de fundo ao qual me refiro, são os dos posts, onde ficam os gadgets etc, eu fiz um site de exemplo http://pohhhaaa.blogspot.com/ pois o q me refiro fica totalmente transparente e eu queria com opacidade com pelomenos 50%, agradeceria pela ajuda qualquer coisa me responde pelo e-mail viniciusdiego@hotmail.com.
Atenciasamente : DIego Vinícius
vlwwwwwwwwww eu consegui muito obrigado mesmo para voce ver entra aki ó clique aqui para ver
http://truquespenguin.blogspot.com
Ola, estou tendo dificuldade para colocar uma imagem em jpg do meu computador no background do meu blog, eu vi todos os passo a passo e fiz mas não está dando certo, eu coloquei
background:$bgcolor url (background.jpg)repeat right
e não está funcionando, o que estou fazendo de errado?
bjs
Fernanda
Olá Fernada
Você observou se não escreveu o endereço correto da imagem e não esqueceu de fechar com ";" ?
Dá uma olhada.
Ai Mamma tentei colocar agora as "aspas" mas não rolou, help meeeeeeeeeeeeeeeeeeeeee! vou colar aqui como está e vc poderá ver o que eu tô fazendo de errado!
body {
background:$bgcolor url("estampa herika blog.jpg")repeat right
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
bjs obrigada!
Fernanda franken@globo.com
Fernanda, você fez upload dessa imagem em algum site que hospeda imagens?
provavelmente não XD
aconselho você fazer upload dessa imagem no image shack (http://img11.imageshack.us/)
para isso você só vai abrir a pagina do image shack, selecione a opção imagens/video e clique em browse.
procure a sua imagem e clique duas vezes nela e clique em carregar.
depois de carregar aparecerá varios links copie o link que ta escrito direto do lado e cole entre parenteses.
vai ficar mais ou menos assim :
body {
background:$bgcolor url(LINK DIRETO)repeat right
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
onde ta escrito link direto é o lugar para você colar o link (lógico xp)
Fernanda e Pedro
Deixem exatamente assim
body {
background: url (ENDEREÇO DA IMAGEM) repeat;
Repare que no final da frase TEM que ter o ponto e vírgula.
Se em seu template tiver a tag $bgcolor que vem depois de background: APAGUE.
Tem que funcionar!
beijo da Mama♥
TEM QUE FUNCIONAR hehe
Mama, vc sabe se dá pra colocar um contador de visitas no Flavors.me? Grato,
@AlexandriaNew
Não deu nada certo.
Vou buscar como se faz mesmo e ensinar como se deve ensinar
Parece com qualquer coisa,menos com um blogger
Afff
Oi, maravilha o seu blog, parabéns! Se bem que você tem tantos parabéns que acho que o meu não vai fazer diferença...
Bom, eu entrei no EDITAR HTML do meu blog, apertei Ctrl+f e não apareceu nada referente a busca background: $bgcolor;.
Então eu não consigo mudar o plano de fundo.
O meu template é pronto eu só posso modificá-lo porém não consigo fazer isso de forma alguma. Obrigada desde já.
Postar um comentário
Caso queira informações mais detalhadas, ou encomendar um template personalizado, use o Formulário de Contato ou meu Email. Responderei o mais breve possível.
Obrigada.