Assine nosso Feed


Melhores Dicas para Blogueiros

Passe o mouse e veja qual o assunto do tutorial de cada imagem

Imagem personalizada para o fundo do site/blog

Com a pagina designer de modelo o blogger tem muitas imagens de fundo prontas para serem instaladas no blog com apenas um clique do mouse, porém ainda é possível que você queira colocar sua própria imagem de fundo no seu blog, então vamos ver como colocar uma imagem de fundo personalizada no blog.

Imagem de fundo do blog
O primeiro passo é ter essa imagem que iremos usar em nosso computador depois disso vamos hospedar a imagem para isso sugerimos o site Imageshack, após enviar a imagem copie o endereço dele, isso aparece em direct link, se tiver duvidas veja aqui como saber se está usando o endereço certo da imagem porque a maioria dos problemas na hora de trocar o fundo do blog é endereço errado de imagem.

Depois disso vamos entrar na pagina do blogger >> designer >> editar html, aqui vamos procurar por body{...} isso é o responsável pelo fundo da pagina(blog), ele deve ser mais ou menos assim:


body {background-color: #66ccff;
margin: 0;border: 0;
text-align:center;color: #333333}


body {
text-align:center;
color:#cc0000;
background:#fff url(endereço da imagem) repeat top right;
font-family:arial,verdana,helvetica,tahoma,Sans-serif;
font-size:100%;


body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;


Não tenho como dizer exatamente como é, pois isso irá variar conforme o modelo de template que você usa, mas o importante é achar body e dentro dele background. Agora você deve apagar a linha background que está em destaque nos exemplos e trocar por isso aqui, claro que usando o endereço da imagem que enviou para o Imageshack.

background-image: url(endereço da imagem);

O restante você não deve modificar somente o trecho background, se quiser pode ver aqui como deixar a imagem de fundo fixa, isso faz que ao rolar a pagina o fundo não se mova, ou ainda como posicionar a imagem de fundo, isso é muito útil no caso de usar imagens pequenas e sem repetição.

Após publicamos esse tutorial o blogger fez alterações e agora permite enviar as imagens de fundo diretamente pela pagina designer do modelo, veja mais detalhado:Trocar imagem de fundo no blog - Designer do modelo. Related Posts with Thumbnails
Link desta página
Comentários
57 Comentários

57 Comentários:

L. Tadeu disse...

Ei Fabiano eu coloque um player de musica no meu blog você pode la conferir, eu queria saber se você sabe como colocar pra quando clicar em um item do menu ou em um post ele não atualizar junto pra não parar a musica, se puder ajudar.
Um abç :D

Patrícia disse...

Olá, acabei de criar meu blog e estava com muita dificuldade para entender quase tudo, mas vim aqui e seu blog me ajudou muito. Eu só estou com dúvida nos feeds, mas depois vou ler a página do feedburner com carinho pra tentar entender. Obrigada por criar esse espaço e compartilhar as informações. Felicidades

Fabiano Roberto disse...

L. Tadeu
acho que não tem como fazer, quando mudar de pagina o player carregará novamente

Anônimo disse...

Para ganhar dinheiro com o GoogleAdsence é nescessário ter conta no Banco ou tem outro jeito?

Fabiano Roberto disse...

o google adsense paga através de tranferencia bancaria, é necessário ter conta sim.

Victor Faria disse...

Fabiano Roberto, o Blogger substituiu a guia "Layout" por uma chamada "Design" e agora só dá pra ediatar os modelos que o Blogger oferece. Você sabe como faz pra editar outros modelos? Tem que ir pelo código HTML? Eu queria mudar a cor dos links dos meus posts, mas não estou conseguindo.

Desde já agradeço!

Seu site está cada vez melhor! Abraço!

Fabiano Roberto disse...

Victor Faria
para mudar o fundo de outros modelos blogger o procedimento é o mesmo na pagina editar html

Simone Aline disse...

Quanto tempo não perturbo vc com as minhas perguntas, hein?!rs

Então, lá vou eu (pela enésima vez...)

Adorei a dica de como colocar as imagens. Em alguns blogs tem uma setinha (ou outro desenho) no canto inferior para "subir". Aí clicando a página volta para o início da tela. Mas ela fica aparecendo sempre ali né? Eu gostaria de incluir uma imagem bem pequenina e uma frase, no final da página, abaixo do rodapé. Tenho como fazer isso dentro do HTML, sem ser com os gadgets? Onde devo colocar e como? Pode me ensinar?
Obrigada! Abraço!
Si

Fabiano Roberto disse...

mas pode colocar como um gadget no final da pagina, o código está aqui, só não use a parte que fixa no canto da pagina
<a href="#"><img border="0" src="IMAGEM TOPO DA PÁGINA"/></a>

Fixar botões no canto da pagina
se mesmo colocar pela pagina editar html é mais dificil, tem que ser depois das tags de rodape(footer)

Anônimo disse...

olá,Fabiano preciso muito da sua ajuda,baixei um templete e extrai tudo certinho mas abriu varis pastas e não como em agumas vezes que baixo e ja abre o html.qual destas esta o html? por favor me ajude

Fabiano Roberto disse...

os templates do blogger são em xml, procure um arquivo assim e envie para o blogger

Fernanda disse...

Oi. Quando vc fez seu dominio no uol host demorou mais que 4 dias para liberarem? Pois fiz o meu na segunda-feira, emiti o boleto e paguei no mesmo dia. Mas hj que é o quinto dia ainda não caiu o pagamento, e diz no site que o prazo é até 4 dias. Será que eu tinha que mandar alguma confirmação? Vou ter que ligar pra eles né...
Obrigada.

ઇઉ Mel ☆ mendes♫ ♪ ♫ disse...

Fabiano,a nova imagem para o fundo tem que ter um tamanho específico? Obrigado pela ajuda!beijos :)

Fabiano Roberto disse...

Fernanda

a imagem de fundo não precisa ter um tamanho especifico, mas depende do que usará, por exemplo uma textura ou imagem (foto, paisagem...) não use imagens grandes demais pois a maioria das pessoas usam tela 1024 de largura.

ઇઉ Mel ☆ mendes♫ ♪ ♫
realmente os domínios que resgistrei demorou menos que isso, é bom ligar para o uolhost, afinal não custa nada, só gastará alguns minutos

Cantinho da Aracy disse...

Olá
Queria agradecer, estava tentando fazer isto e não tinha consguido até agora, sua dicas foram super uteis, muito obrigada.
Continuarei te seguindo
Um abraço, Aracy

Renata Risoléo disse...

Olá Fabiano, comecei um blog a menos de 2 semanas, e ñ vou mentir que estou apanhando para aprender, seu site tem sitdo mto esclarecedor, mas gostaria que me ajudasse, eu quero ter uma apresentação de slides p/ divulgação dos meus trabalhos, mas ñ estou conseguindo mudar o local dos slides, queria que ficasse do lado do meu perfil, com fotos maiores, e embaixo das fotos, as postagens, mas ñ estou conseguindo mover os slides. Fiz os slides pelo picassa, ñ estou conseguindo colocar a minha pasta de imagens que criei.
Agradeço a atenção.
Renata
http://modelagem-modelagem.blogspot.com/

Fabiano Roberto disse...

Renata Risoléo
pelo que entendi a apresentação de slides você já conseguiu fazer, só precisa mudar de lugar, isso é feito na pagina designer, arrastando os gadgets e depois clique para salvar.

faça um postagem no blog, mesmo que depois você apague, assim ficará mais fácil a visuliação.

Haiyat Raziya disse...

Olá Fabiano.
Em primeiro lugar gostaria de agradecer pelas suas dicas. São realmente salvadoras.
Bem, acabei de mudar a aparência do meu blog http://hrarteeculturaoriental.blogspot.com
e vc me apareceu como um anjo, exatamente pq eu tava triste por não poder botar uma imagem linda das pirâmides q tenho no Picasa.
Segui todo o seu roteiro, mas o q pude perceber é q o html desses novos modelos trabalham definindo variáveis logo no início. Então o que fiz foi justamente alterar a variável da http original para o link da imagem no picasa.
O que acontece a seguir, quando visualizo a página, é que fica tudo preto e a imagem não aparece.
Esgotei meus parcos conhecimentos e não sei mais o que fazer. Vc pode me ajudar?

Haiyat Raziya disse...

Oi Fabiano, voltei.
Pode deixar, já resolvi, e graças a você.
Li cuidadosamente pra ver se não tinha perdido algum detalhe e tinha perdido... a questão do endereço correto da imagem.
Fui no site que você recomendou e segui todas as instruções, até o teste pra ver se o link está correto.
Amigo mais uma vez, muito obrigada!
Já favoritei seu blog e estou linkando no meu blog de estudos.
Deus te abençoe amigo!

Haiyat Raziya disse...

Olha eu aqui de novo Fabiano!
Eu gostaria de te perguntar se tem como alterar um plano de fundo de uma página no Myspace.
Tentei e não consegui personalizar.
Gde abs.

Fabiano Roberto disse...

Haiyat Raziya
infelizmente não sei editar o myspace

INDOMADO disse...

OLÁ, ESTOU COM ESSE PROBLEMINHA OH:
http://www.blogger.com/template-editor.g?blogID=7164789793581185140

SERA QUE TEM COMO VC ME AJUDAR?

É QUE NAO TO CONSEGUINDO MUDAR A IMAGEM DE PLANO DE FUNDO, NO LUGAR QUER ERA PRA TA ESCRITO:FAÇA UPLOAD DA IMAGEM; ESTA ESCRITO: NÃO HÁ IMAGEM

O QUE FAÇO?

Fabiano Roberto disse...

INDOMADO, você precisa entrar no blogger in draft http://draft.blogger.com/


veja mais aqui: Trocar imagem de fundo no blog - Designer do modelo

INDOMADO disse...

OI FABIANO, SEU BLOG ESTA DE PARABÊNS APRENDI MUITA COISA AQUI.
MAS OLHA, EU FIZ COMO VC DISSE,POREM DEU CERTO DE CERTA FORMA, CONSEGUI BAIXAR A IMAGEM, POREM O NO BLOG CONTINUA O FUNDO BRANCO NAO TA APARECENDO A IMAGEM AFF, PODE ME AJUDAR?
OBRIGADA

Fabiano Roberto disse...

entre na pagina editar html e procure por:

body {
font: normal bold 20px Verdana, Geneva, sans-serif;;
color: #296795;
background: $(background-color: #66ccff;);
}

troque essa linha:
background: $(background-color: #66ccff;);

por:

background-image: url(http://www.blogger.com/img/logo40.png);

depois hospede uma imagem no site imageshack e troque o endereço da imagem, essa que está ai é o logotipo do blogger

INDOMADO disse...

OLÁ FABIANO, PASSANDO AQUI PARA AGRADECER.
OBRIGADA POR AJUDAR-ME

ASS:SARAH KARSTEN(SECRETARIA DE INDOMADO)

Doce Sex Shop disse...

Ola!
Obrigado pelas dicas =)
consegui colocar a imagem mas ela fica pequena =(
gostaria de saber como posso deixa-la grande ... tem como ??
é por configuração no blog ou por tamanho de imagem mesmo??

brigadaaa

Doce Pecado disse...

Ola
consegui colocar a imagem no blog ... mas ela fica pequena, pra ela ficar maior eu tenho que configurar a imagem em tamanho maior?

brigadao =)

Fabiano Roberto disse...

a imagem de fundo não tem ajuste de tamanho, você precisa fazer a imagem já nas medidas certas, veja aqui:
Programas Gratuitos para Edição de Imagens

Fafá Soares disse...

Olá? Eu gostaria de fazer uma página no photoshop para meu blog,
queria saber qual o tamanho da imagem para eu colocar no body do HTML? Se puder me ajudar agradeço.

Fabiano Roberto disse...

Fafá Soares
atualmente a maior parte dos visitantes do blog usam resolução de tela com largura 1024, então acho que o blog deve ter algo por volta de 990 de largura, a imagem pode ser deste tamanho, claro dependendo da sua idéia, se for um textura de fundo pode ser de qualquer tamanho

Elvis Kimimoto disse...

Fabiano
tem como colocar um arquivo do flash no blog?
ex: eu queria colocar uma animação q eu fiz no macromédi flash 8 mas naum sei como ajuda ae

vlw :D

Fabiano Roberto disse...

precisa hospedar o flash em outro site e depois colocar no blog, pesquise por código html do flash

Anônimo disse...

OlÁ!! Eu queira muito saber como se faz aquele : "outros tutoriais para ajudar logueiros2 e depois imagens em baixo com o titulo do post e nós podemos carregar e escolher a mensagem que queremos ler. Me ajude! Queria muito por uma coisa assim no meu blog!

Grande trabalho neste blog, :)

Fabiano Roberto disse...

Anonimo
aquilo é são os assuntos relacionados gerados pelo site linkwithin, apenas troquei a frase, veja aqui: Mudar o texto You might also like

dwerso disse...

Boas. Fabiano uma ajuda s.f.f
como faco para retirar plano de fundo na zona do post. nao e a do fundo do site. eu tenho um plano de fundo nas postagens transparente meio branco verefica o que falo no meu site versatiltv.com
o template e do blogger so tem umas mudancas.
alguma ajuda sera bem vinda.
muito obrigado
abraco

Fabiano Roberto disse...

dwerso
não consegui entrar no link, mas a cor de fundo pode ser no estilo .main-inner, porém isso depende muito do template

dwerso disse...

aqui o link www.versatiltv.com ve como pode ajudar. obrigado

Anônimo disse...

Desta vez não entendi o que colar do código e nem onde, pois está assim: body{...}... Qual parte do código colo e exatamente onde?

Fabiano Roberto disse...

no segundo exemplo de body tem endereço da imagem no código

body {
text-align:center;
color:#cc0000;
background:#fff url(endereço da imagem) repeat top right;
font-family:arial,verdana,helvetica,tahoma,Sans-serif;
font-size:100%;

thay-loket disse...

óla fabiano tenho uma ótima sujestao para acriaçao de imagens vou escrever aqui embaixo o nome do site dai vc acesa tanbom, eu nem sei como eu descobri este site mais vc acessa ele tá.Desculpe meus erros de portugues ainda estou na 7° serie :D veja abaixo
http://pixlr.com/editor/?loc=pt-br acho que ja conheçe o Photo editor online gratuito ele é otimo vc pode criar as imagen muito legal no meu blog crio as imagens com o photo editor online gratuito é muito divertido :):D
estou conheçendo como deixar o meu blog mais bonito tipo ainda sou uma iniciante teu blog esta bonbando muito legal quer dizer site.
Muito loko voce em sabe de todas as paradas (sinistro) tem serteza que vc é do planeta terra!, to co mair medao ae rsrs (SOU UMA PIADA)
Sou uma garotinha muito educada e digo muito obrigada antes que eu me esqueça o paint.net e o gimp sao muito bom mais gosto mais do paint.net por que tem mais sugestao de bainers no titulo do blog eu gostei dos dois mais eu sugiro se quiser criar algo usa o pait.net


OBIGADA!!NHÉ rrssrsrsrskkk brigada
FICA COM O PAPAI DO CÈU!!
ass:THAY-LOKET

Meggie disse...

Olá, Fabiano... boa tarde!

Estou c/ problemas no meu blog.
Qdo ele é visualizado pelo IE, aparece desconfigurado e c/ as cores diferentes do original. Porém qdo é visualizado c/ o google crome, ele aparece normal.

Pedi ajuda no blogger e me deram essa resposta:
"Você já pensou em migrar o seu layout para um dos novos modelos oferecidos pelo Blogger?

Eles são muito bonitos e fáceis de serem customizados."

Acontece que quero manter o modelo atual.
Você pode me ajudar?

Antecipo agradecimentos.

ps.: End. Blog: www.amar-gareth.blogspot.com

Fabiano Roberto disse...

Meggie
entre na pagina editar html e procure por:
#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway_rose/bg_main_wrapper.gif) repeat-y left top;
}


apague essa parte e veja o que acontece:
repeat-y left top;

Meggie disse...

Olá, Fabiano.
Primeiro quero a agradecer a atenção e a rapidez na resposta.

No meu blog aparece assim:
#content-wrapper {
position: relative;
width: 760px;
background: #f7f0e9 url(http://www.blogblog.com/thisaway_rose/bg_main_wrapper.gif) repeat-y $startSide top;
}

apaguei a parte
repeat-y $startSide top;

e continuou do mesmo jeito.

Tem outra sugestão?

Mais uma vez, meu muito obrigada!

Fabiano Roberto disse...

coloque a imagem de fundo neste trecho #outer-wrapper

fica poucas linhas acima de onde está alterando...

mas essa é uma falha deste template... já usei um assim e acabei trocando

Selene disse...

Olá, acabei de criar o meu primeiro blogue. Confesso que ainda ando a descobrir tudo, mas agora com as suas dicas tudo será mais fácil.
Obg e parabéns.

Tsukuy disse...

http://www.dicasparablogs.com.br/2010/07/imagem-personalizada-para-o-fundo-do.html
Tentei por essa imagem /\/\/\, mas não consegui, fiz exatamente oq disse para fazer e por fim o fundo do blog ficou todo branco, pode me ajudar?

Tsukuy disse...

Estou criando um blog, e tentei fazer isso que vc disse, mas quando terminei fiquei tudo branco, me ajuda?
Link direto da imagem: http://www.dicasparablogs.com.br/2010/07/imagem-personalizada-para-o-fundo-do.html

Blog:http://theanimetimes.blogspot.com/

Angelo disse...

otimo !, quando eu usava templete padrão do blogger se colocava imagem pelo desing do modelo e agora estou usando um antigo e eu queria colocar uma imagem de fundo e não tinha essa opção então esse tutorial me ajudou, mas eu quero a imagem de fundo fixa, como se faz isso ?

Fabiano Roberto disse...

Tsukuy
aquele código para editar diretamente o html é mais complicado de usar do que esse que mostramos neste tutorial.

veja se não apagou nada por engano provavelmente é isso que aconteceu

Fabiano Roberto disse...

Angelo

veja aqui Imagem no fundo do blog

daniblogger disse...

Opa,olá fabiano!

Não estou conseguindo trocar a imagem do meu template..quando coloco uma imagem ele se divide em 3 partes ou mais,no fundo do template.

Como faço para tirar essa repetição e colocar a imagem inteira?

Fabiano Roberto disse...

daniblogger
para usar uma imagem inteira precisa ser uma imagem grande (já no tamanho certo)

o código para impedir a repetição é background-repeat: no-repeat;

veja aqui: Imagem no fundo do blog


.

Lucas disse...

Pq quando troco a imagem background por uma outra do mesmo tamanho sem modificar seus atributos de repetição e etc, a nova imagem fica fora de lugar?

Fabiano Roberto disse...

Lucas
se a imagem é do mesmo tamanho não tem explicação, mas você tem certeza sobre o tamanho das duas imagens?

Lucas disse...

Sim Fabiano... Eu copio a url da imagem e baixo para modificar as cores e salvo sem modificar o tamanho; depois faço upload, copio a url e coloco no lugar da primeira, mas fica fora de lugar...

Fabiano Roberto disse...

mas enviou a imagem na pagina design do modelo?

veja as configurações de posicionamento da imagem de fundo, veja aqui Trocar imagem de fundo no blog - Designer do modelo

Postar um comentário