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.
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.
ResponderExcluirUm 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
ResponderExcluirL. Tadeu
ResponderExcluiracho 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?
ResponderExcluiro google adsense paga através de tranferencia bancaria, é necessário ter conta sim.
ResponderExcluirFabiano 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.
ResponderExcluirDesde já agradeço!
Seu site está cada vez melhor! Abraço!
Victor Faria
ResponderExcluirpara 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
ResponderExcluirEntã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
ResponderExcluir<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
ResponderExcluiros templates do blogger são em xml, procure um arquivo assim e envie para o blogger
ResponderExcluirOi. 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é...
ResponderExcluirObrigada.
Fabiano,a nova imagem para o fundo tem que ter um tamanho específico? Obrigado pela ajuda!beijos :)
ResponderExcluirFernanda
ResponderExcluira 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á
ResponderExcluirQueria 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.
ResponderExcluirAgradeço a atenção.
Renata
http://modelagem-modelagem.blogspot.com/
Renata Risoléo
ResponderExcluirpelo 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.
ResponderExcluirEm 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.
ResponderExcluirPode 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!
ResponderExcluirEu 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
ResponderExcluirinfelizmente não sei editar o myspace
OLÁ, ESTOU COM ESSE PROBLEMINHA OH:
ResponderExcluirhttp://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/
ResponderExcluirveja mais aqui: Trocar imagem de fundo no blog - Designer do modelo
OI FABIANO, SEU BLOG ESTA DE PARABÊNS APRENDI MUITA COISA AQUI.
ResponderExcluirMAS 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:
ResponderExcluirbody {
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.
ResponderExcluirOBRIGADA POR AJUDAR-ME
ASS:SARAH KARSTEN(SECRETARIA DE INDOMADO)
Ola!
ResponderExcluirObrigado 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
Ola
ResponderExcluirconsegui colocar a imagem no blog ... mas ela fica pequena, pra ela ficar maior eu tenho que configurar a imagem em tamanho maior?
brigadao =)
a imagem de fundo não tem ajuste de tamanho, você precisa fazer a imagem já nas medidas certas, veja aqui:
ResponderExcluirProgramas Gratuitos para Edição de Imagens
Olá? Eu gostaria de fazer uma página no photoshop para meu blog,
ResponderExcluirqueria saber qual o tamanho da imagem para eu colocar no body do HTML? Se puder me ajudar agradeço.
Fafá Soares
ResponderExcluiratualmente 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
Fabiano
ResponderExcluirtem 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
precisa hospedar o flash em outro site e depois colocar no blog, pesquise por código html do flash
ResponderExcluirOlÁ!! 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!
ResponderExcluirGrande trabalho neste blog, :)
Anonimo
ResponderExcluiraquilo é são os assuntos relacionados gerados pelo site linkwithin, apenas troquei a frase, veja aqui: Mudar o texto You might also like
Boas. Fabiano uma ajuda s.f.f
ResponderExcluircomo 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
dwerso
ResponderExcluirnão consegui entrar no link, mas a cor de fundo pode ser no estilo .main-inner, porém isso depende muito do template
aqui o link www.versatiltv.com ve como pode ajudar. obrigado
ResponderExcluirDesta 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?
ResponderExcluirno segundo exemplo de body tem endereço da imagem no código
ResponderExcluirbody {
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%;
ó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
ResponderExcluirhttp://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
Olá, Fabiano... boa tarde!
ResponderExcluirEstou 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
Meggie
ResponderExcluirentre 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;
Olá, Fabiano.
ResponderExcluirPrimeiro 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!
coloque a imagem de fundo neste trecho #outer-wrapper
ResponderExcluirfica poucas linhas acima de onde está alterando...
mas essa é uma falha deste template... já usei um assim e acabei trocando
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.
ResponderExcluirObg e parabéns.
http://www.dicasparablogs.com.br/2010/07/imagem-personalizada-para-o-fundo-do.html
ResponderExcluirTentei 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?
Estou criando um blog, e tentei fazer isso que vc disse, mas quando terminei fiquei tudo branco, me ajuda?
ResponderExcluirLink direto da imagem: http://www.dicasparablogs.com.br/2010/07/imagem-personalizada-para-o-fundo-do.html
Blog:http://theanimetimes.blogspot.com/
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 ?
ResponderExcluirTsukuy
ResponderExcluiraquele 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
Angelo
ResponderExcluirveja aqui Imagem no fundo do blog
Opa,olá fabiano!
ResponderExcluirNã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?
daniblogger
ResponderExcluirpara 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
.
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?
ResponderExcluirLucas
ResponderExcluirse a imagem é do mesmo tamanho não tem explicação, mas você tem certeza sobre o tamanho das duas imagens?
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...
ResponderExcluirmas enviou a imagem na pagina design do modelo?
ResponderExcluirveja as configurações de posicionamento da imagem de fundo, veja aqui Trocar imagem de fundo no blog - Designer do modelo
Fabiano... Qual o tamanho ideal para uma imagem de fundo de um blog de width:995px?
ResponderExcluirna verdade não existe um tamanho certo para imagem de fundo porque o ajuste dela vai depender do tamanho da tela de quem acessa seu blog.
ResponderExcluireu prefiro usar texturas do que uma imagem porque a textura se repetindo cobre a pagina inteira.
Mas no meu caso é uma imagem panorâmica fixa no fundo como a sua na demonstração...
ResponderExcluirvocê se usar a imagem no "corpo" do blog largura total do blog pode usar o mesmo valor da largura do seu blog.
ResponderExcluirveja no google analytics qual a resolução de tela da maioria dos seus visitantes e faça uma imagem pensando neles. Uma imagem do tamanho que falou (995) é uma boa idéia ou até um pouco maior.
atualmente aqui no dicas para blogs a maioria dos nossos visitantes usa tela 1280 ou superior.
Ok filho... Brigadim
ResponderExcluirVou tentando aqui.