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.
26 comentários:
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
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
L. Tadeu
acho que não tem como fazer, quando mudar de pagina o player carregará novamente
Para ganhar dinheiro com o GoogleAdsence é nescessário ter conta no Banco ou tem outro jeito?
o google adsense paga através de tranferencia bancaria, é necessário ter conta sim.
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!
Victor Faria
para mudar o fundo de outros modelos blogger o procedimento é o mesmo na pagina editar html
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
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)
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
os templates do blogger são em xml, procure um arquivo assim e envie para o blogger
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.
Fabiano,a nova imagem para o fundo tem que ter um tamanho específico? Obrigado pela ajuda!beijos :)
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
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
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/
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.
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?
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!
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.
Haiyat Raziya
infelizmente não sei editar o myspace
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?
INDOMADO, você precisa entrar no blogger in draft http://draft.blogger.com/
veja mais aqui: Trocar imagem de fundo no blog - Designer do modelo
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
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
OLÁ FABIANO, PASSANDO AQUI PARA AGRADECER.
OBRIGADA POR AJUDAR-ME
ASS:SARAH KARSTEN(SECRETARIA DE INDOMADO)
Postar um comentário