Entre na pagina layout, adicionar gadget, html/javascript e coloque esse código:
<a href="#" onclick="document.bgColor='#0000ff'">Azul</a><br />
<a href="#" onclick="document.bgColor='#FFFF00'">Amarelo</a><br />
<a href="#" onclick="document.bgColor='#000000'">Preto</a><br />
Veja que as três linhas são basicamente iguais, portanto para usar outras cores ou dar mais opções só precisa alterar o texto com o nome da cor e o código da cor de fundo, no caso da primeira linha #0000ff e azul, cuidado para não apagar as aspas nem outros sinais do código senão ele não funcionará.
Outra coisa que você precisa alterar é na pagina editar html, procure por: body{....} se dentro das chaves do body tiver algo definindo a cor de fundo você precisará apagar senão o código para mudar a cor de fundo não funcionará, veja se tem background-color ou background-image: url(......) e se encontrar apague.
Infelizmente para usar esse efeito no seu blog ele sempre aparecerá com o fundo branco, pois se definir outra cor de fundo não conseguirá fazer o código que indicamos funcionar e alterar a cor da pagina.
Você também poderá fazer isso com imagens usando o código abaixo:
<a href="#" onclick="document.body.background='imagem 1'"><img src="imagem 1" border="0" /></a><br />
<a href="#" onclick="document.body.background='imagem 2'"><img src="imagem 2" border="0" /></a><br />
<a href="#" onclick="document.body.background='imagem 3'"><img src="imagem 3" border="0" /></a><br />
Se preferir salve uma miniatura da imagem para usar como link para troca de imagem de fundo, isso é util dependendo do tamanho da imagem de fundo original que for utilizar no seu blog.
Veja também:
Botões fixos no canto da pagina
Formatar menu jump
Parcerias
Colocar um domínio no blog
Erros nos códigos
Link para esta página
26 comentários:
Oi Fabiano
O teu blog é muito bom e eu o visito há muito tempo.Muito do que sei, aprendí aqui. Obrigada por compartilhar conhecimentos!
Sobre a troca de templates sem perder widgets, penso que você tem razão, teria que ser feito linha por linha mesmo. Eu acho que o outro método, de usar o Firefox para salvar widgets, é melhor. Usei ontem à tarde e troquei o template do meu blog em 40 minutinhos e deu tudo certo. Veja o vídeo com o tutorial. Obrigada pela tua visita!
mi coloca como parceiro ai
vc ja ta como parceiro
vlw pelas dicas!!
sobre parceiras
Atualmente não fazemos mais trocas de links ou banners, mas se colocar um link para nosso blog pode aparecer entre os top parceiros
http://www.dicasparablogs.com.br/2009/07/parcerias.html
Pode parecer difícil mas se o seu blog enviar 3 ou 4 visitas por dia já será o suficiente para aparecer na lista dos top parceiros
ou caso se interesse aceitamos anúncios pagos em nosso blog
http://www.dicasparablogs.com.br/2009/08/anuncios-no-blog.html
Oi, meu amigo estou muito feliz Porter um blog como o seu no ar, pois tem não só me ajudado a organizar o meu blog como o de muitas outras pessoas sucesso.
Tenho um boato, se no template do meu blog o texto for preto creio que só mudara o fundo para a mesma cor do texto o que fara que o texto fique envisivel pode se dizer então só tem uma forma pra mudar isso facilmente colocando uma cor que não esteja presente no código como vermelho.
queria colocar um template no meu blog do piu piu como posso fazer isso, queria dar uma caracteristica minha pro meu blog
gisafessora
eu estava mexendo no meu blog de teste e preparando um template sobre o piu piu como você disse, mas sinceramente estou sem idéias, então se quiser olhar e dar sugestões o endereço é:
http://fazendolayout.blogspot.com/
depois escreva para o meu email é mais fácil do que pelos comentários do blog
Este código é muito útil porem é obsoleto. Você não eve apagar o CSS da página (deixando a toda branca ) para depois redefinir ss propriedades do documento HTML usando JavaScript. O ideal é fazer um código JavaScript que altere o CSS ja existente evitando qualquer efeito colateral e obtendo um acabamento perfeito. Infelizmente no momento não tenho um código desses para por aqui, mas não é nada de outro mundo não. Parabéns pelo blog!
Victor
concordo que o código é simples, mas o problema é que nem todos os códigos funcionam bem no blogger, já fiz muita coisas em sites que não dá para fazer no blogspot.
se achar outro código envie para mim e poderei publicar aqui, e claro com os créditos dizendo que foi seu site que enviou.
Muito bom mesmo. Eu acompanho esse blog a quase 1 ano, aprendi muita coisa aqui, vlw mesmo por compartilhar seus conhecimentos com a gente. Que DEUS te abençoe ! (:
Fabiano,
eu escolhi todas as cores do meu blog, mas ainda assim ele continua com um fundo branco. Como posso alterar isso? É porque eu coloquei uma lateral no blog, que tem um fundo rosinha claro. Eu queria que todo o fundo ficasse assim, como se fosse um desenho só, entende? Copiei o código que está lá pra vc:
body {
background-color: #ccc;
margin:0;
font: x-small Verdana, Sans-serif;
text-align:center;
color:#000;
font-size/* */:/**/small;
font-size: /**/small;
}
É claro que não entendi nada disso, e "acho" que deve ser esse...rsrs
E te pergunto: ???????? O que faço?
Bjs
Simone Aline
você colocou uma imagem de fundo no blog que tem fundo branco
http://i826.photobucket.com/albums/zz187/silmara37/BL_mami09_EndlessLove.jpg
para mudar a cor do fundo das postagens terá que tirar isso e também a cor de fundo que está em #main e #sidebar
se quiser escreva para meu email para falarmos sobre isso
fabiano eu adorei as dicas no começo era difícil porque eu não entendia nada de htlm mais tentei tanto que consegui personalizar o meu blogs estou tentando agora formar três colunas . eu tenho cinco blogs e recomendo aos meus amigos as suas dicas e todos se tornaram seus seguidores ok ? um abraço
Olá "professor"!
Como eu faço para que os visitem mudem a imagem do fundo com um clique?
Gustavo Reis
fiz uma atualização nesta postagem agora no final dela mostra como fazer com imagens.
obrigado pela pergunta que serviu como sugestão.
Fabiano, eu fui testar isso, vi que as imagens ficaram grandes, não sei como reduzir as imagens, quando eu cliquei em mudar a imagem do fundo, a imagem não mudou (eu achei que coloquei o url da imagem padrão fixa, no Editar Html)). Devo tirá-la
Clique no meu documento e por favor, corrija os códigos:
http://docs.google.com/View?id=dg9dc8q5_9ch5tj2gv
Obrigado!
onde você deixou escrito imagem 1, imagem 2 e imagem 3 em cada linha do codigo precisa alterar também para o endereço da imagem que deseja usar como fundo
se na sua pagina editar html já tiver definida uma imagem de fundo no código do body precisa retirar também
Fabiano, eu consegui! Mas um problema... os planos do fundo das imagens ficaram muito grandes. Como reduzo o tamanho das imagens do fundo ao tamanho da tela inteira do blog, igual ao de protetor de tela, papel de parede?
Dá para os visitarem mudarem a fonte do texto e a cor do texto com um clique?
Gustavo, não tem como mudar a cor do texto
para diminuir a imagem precisa salvar no seu computador e modificar usando qualquer programa para editar imagens
Como faço pra colocar fundop branco nas postagens, pois eu estava editando o template e acabei mudando o que não devia agora o fundo sumiu.
vejam como ficou:
http://img191.imageshack.us/img191/3278/problema.gif
Sera que alguem consegue me ajudar.
No aguardo.
ooi , *--*
eeu nn conseguui axar essa parte de body (...) etc , etc ;(
ajuda por favôr ;/
Mudar a cor de fundo com um clique.
ola amigo usei este codigo e no internet explorer nao funciona.
retirei o codigo,e mudei o body para
background:$bgcolor;
so que,a imagem branca nao sai estou mudando na opicao fontes de cores do blog e nao sai a cor branca do fundo.
como reverter isso?
Good Sunday
para funcionar tem que apagar essa linha background:$bgcolor; que está no body
não consigo usar esse código para imagens em meu blog(www.bekabakana.blogspot.com)
o que será que ocorre?
vc tem algum msn aonde podemos conversar? o meu é prislameira@hotmail.com, grata
Beka Bakana
veja se no estilo body {...} na pagina editar html já tem algum cor ou imagem de fundo (background) se tiver precisa retirar senão o código não funciona
Obrigada Fabiano,
no blog está assim:
body {
background: none;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}
procede? continua não funcionando :/
Postar um comentário