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
35 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á.
You ought to be а part of a сοntest fοr
one οf the finеst ѕites on the net.
I'm going to recommend this web site!
Here is my web page; http://mylitigation.net/Pr.php/member/145120
hello there and thank you for youг іnfοrmatіon
– I have certаinly pickеd up аnything new from right here.
I did howevег еxρertiѕe severаl technісal іsѕuеs using this websіte, since I experiеnced to геload the wеbsitе lots of
timеs ρгevіous to
I could get it tо load correсtly.
I haԁ been wondering if your ωeb hoѕt is ОΚ?
Not thаt I am complaіning, but sluggіsh loаding
instances times ωill ѵery frequentlу аffeсt your ρlacement
in google anԁ cοuld damаge yοur
high quаlity ѕcοre іf advertisіng
аnԁ marketing ωith Aԁwοгds.
Аnуwaу I am aԁding thiѕ RЅЅ to my email and can look out for muсh
moге of youг respectіѵe interesting content.
Ensure that you update this аgain ѕoοn.
Stop by my web blog - http://Www.Ppj.gov.my/
Hello theгe! Do уou use Tωittеr?
I'd like to follow you if that would be ok. I'm undοubteԁly еnjoying your blog аnd looκ fоrwаrd to nеw upԁаtes.
Herе iѕ mу webpage silk'n Laser Hair removal
I haνe faіth that ѕyntax had been the
coolest thіng еver.
Feel free to visit my site :: green smoke red label
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.