Um efeito interessante é permitir que o visitante do blog escolha a cor de fundo da pagina apenas clicando na cor que mais gosta, dependendo do publico do seu blog essa é uma boa maneira para despertar a curiosidade das pessoas sobre o blog e o melhor de tudo o código para fazer isso é muito simples e fácil de usar.
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
Oi Fabiano
ResponderExcluirO 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
ResponderExcluirvc ja ta como parceiro
vlw pelas dicas!!
sobre parceiras
ResponderExcluirAtualmente 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.
ResponderExcluirTenho 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.
ResponderExcluirqueria colocar um template no meu blog do piu piu como posso fazer isso, queria dar uma caracteristica minha pro meu blog
ResponderExcluirgisafessora
ResponderExcluireu 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!
ResponderExcluirVictor
ResponderExcluirconcordo 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 ! (:
ResponderExcluirFabiano,
ResponderExcluireu 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
ResponderExcluirvocê 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
ResponderExcluirOlá "professor"!
ResponderExcluirComo eu faço para que os visitem mudem a imagem do fundo com um clique?
Gustavo Reis
ResponderExcluirfiz 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
ResponderExcluirClique 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
ResponderExcluirse 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?
ResponderExcluirDá 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
ResponderExcluirpara 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.
ResponderExcluirvejam como ficou:
http://img191.imageshack.us/img191/3278/problema.gif
Sera que alguem consegue me ajudar.
No aguardo.
ooi , *--*
ResponderExcluireeu nn conseguui axar essa parte de body (...) etc , etc ;(
ajuda por favôr ;/
Mudar a cor de fundo com um clique.
ResponderExcluirola 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
ResponderExcluirpara 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)
ResponderExcluiro que será que ocorre?
vc tem algum msn aonde podemos conversar? o meu é prislameira@hotmail.com, grata
Beka Bakana
ResponderExcluirveja 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,
ResponderExcluirno 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 :/
Consegui fazer o codigo tudo e tal, mas gostaria de saber:
ResponderExcluirQuando escolho uma cor para a pagina ela troca sim, mas quando saiu daquela pagina, para por exemplo, ler uma postagem o fundo volta a ser branco, teria como fazer com que eu navegue pelo blog e o fundo continue como eu escolhi???
agradeço desde ja, adoro seu blog e sempre que posso estou dando umas visitinhas...
até
esse código muda a cor de fundo do blog, mas não tem como fazer isso quando o visitante mudar de pagina, ela sempre volta para a cor original
ResponderExcluirae eu acho que tem um erro nesses codigo ai vc já testou ?? tem como coloca no nesse blog para nois ver como fica
ResponderExcluirNo meu blog existe a imagen logo tipo que como top
ResponderExcluire a de fundo do blog que fica em baixo.
Gostaria de fazer esse efeito mas para trocar o logo tipo como tenho varios no mesmo tamanho. como teria que fazer?
Qual o Tutorial para que o logo troque conforme a atualização de pagina?
Obg Pela Ajuda
Baixe A Mais
ResponderExcluiraqui tem um sistema de Banner Rotativo, assim cada vez que a pagina for visualizada um banner aparece em ordem aleatória.
Fabiano Roberto eu ao colocar esse código tem como colocar os códigos no-repeat, fixed, center para as imagens de fundo não repetirem para ficarem fixas e para centra-las porque se eu colocar dentro das chave do body a imagem fica com bug.
ResponderExcluirTenho também outra duvida dá para entrar no blog e já ter uma imagem e depois ir trocando?
Parabéns pelo blog.
Storm_TR
ResponderExcluirveja aqui sobre Posicionar imagem de fundo
quando você fala ir trocar a imagem de fundo, o que está querendo?
que a imagem mude sozinha? se for é possivel com gif animado, mas o blog pode ficar lento por causa do tamanho do gif
Eu não achei a tag = body{....}, com a cor entre as chaves!!
ResponderExcluiro código da cor é background....
ResponderExcluirmas não tenho como dizer exatamente como está no seu html porque o blogger modificar o código na hora de publicar
preciso de uma ajuda.. estava tentando colocar um cursos no meu blog e agora o plano de fundo sumiu.
ResponderExcluirnão sei o q fazer...
poderia me ajudar?
obrigada
Tamiris veja se usou os endereços corretos das imagens e não apagou nenhum detalhe do código por engano
ResponderExcluir