Trocar a cor do fundo do blog com 1 clique | Quero Dicas | Tutoriais para seu blogs


Trocar a cor do fundo do blog com 1 clique


Existem blogs ou sites que deixam seus visitantes ainda mais amigáveis com a personalização do seu template. Uma dessas formas é a troca do fundo do blog (plano de fundo).
O blog Eliane Gaspareto, fez um post sobre este tema e hoje eu trouxe ele para você aprender aqui também no Quero Dicas. Eu achei muito divertido e muito lindinho este gadget, espero que você também goste.


  TUTORIAL


Ele é muito simples de aplicar.
1 - Acesse o "Painel" do seu blog
2 - Vá em "Layout" e "Adicionar Gadget"
3 - Escolha a opção "HTML/Javascript"



4 - Cole o código e salve.

 
<div style="text-align: center;">
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://3.bp.blogspot.com/-DXdK1lCkhps/U4TxBWm0zgI/AAAAAAAA5oU/LQXTX_pekLE/s1600/2pat_20080216165807.gif)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="http://3.bp.blogspot.com/-DXdK1lCkhps/U4TxBWm0zgI/AAAAAAAA5oU/LQXTX_pekLE/s1600/2pat_20080216165807.gif" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://3.bp.blogspot.com/-zQbYb1XNiJo/U4TxKPkaWmI/AAAAAAAA5ok/_BAEE2i4Zrg/s1600/77words_patt7_207.gif)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="http://3.bp.blogspot.com/-zQbYb1XNiJo/U4TxKPkaWmI/AAAAAAAA5ok/_BAEE2i4Zrg/s1600/77words_patt7_207.gif" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://1.bp.blogspot.com/-cDD1KLlCr5I/U4TxG5S5sCI/AAAAAAAA5oc/lVqwVxyrXro/s1600/35.gif)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="http://1.bp.blogspot.com/-cDD1KLlCr5I/U4TxG5S5sCI/AAAAAAAA5oc/lVqwVxyrXro/s1600/35.gif" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://1.bp.blogspot.com/-YS1aDSpmuJ8/U4TxPYYIIxI/AAAAAAAA5os/0M3GqrwCfJc/s1600/fn.png)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="http://1.bp.blogspot.com/-YS1aDSpmuJ8/U4TxPYYIIxI/AAAAAAAA5os/0M3GqrwCfJc/s1600/fn.png" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://1.bp.blogspot.com/-KThP6cUFOM0/U4Tw9bl3r4I/AAAAAAAA5oM/3KhUehXO86k/s1600/fundoteste.png)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="http://1.bp.blogspot.com/-KThP6cUFOM0/U4Tw9bl3r4I/AAAAAAAA5oM/3KhUehXO86k/s1600/fundoteste.png" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://4.bp.blogspot.com/-4jhwju5H6Jc/U4TzhR6MtrI/AAAAAAAA5pM/2oWuk5kDDEU/s1600/fundo1.png)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="http://4.bp.blogspot.com/-4jhwju5H6Jc/U4TzhR6MtrI/AAAAAAAA5pM/2oWuk5kDDEU/s1600/fundo1.png" /></a>
</div>



 
5 - Agora posicione o gadget onde deseja, salve as alterações e prontinho!

Observação:
Eu deixei as imagens como no código de origem (www) da postagem original do blog (Eliana Gaspareto). Caso queira trocar as imagens, é só criá-las ou procurar e pegar na web, redirecioná-las (tamanho), salvar e hospedar as novas imagens. Se não souber hospedar imagens, veja um dos tutoriais abaixo:
► Como hospedar uma imagem gratuitamente na Web para seu blog
Como hospedar suas imagens no seu próprio blog
Uma das opções de fundo são os sites: Ava7PatternsDinpattern e Themesltd. Feito a escolha das imagens, é só alterar a URL da imagem no código e pronto
Exemplo:

Desse:
http://3.bp.blogspot.com/-DXdK1lCkhps/U4TxBWm0zgI/AAAAAAAA5oU/LQXTX_pekLE/s1600/2pat_20080216165807.gif
Para a URL (endereço) da sua nova imagem.

E não se esqueça de trocar as 2 vezes que o endereço aparece no código. Veja:

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://1.bp.blogspot.com/-KThP6cUFOM0/U4Tw9bl3r4I/AAAAAAAA5oM/3KhUehXO86k/s1600/fundoteste.png)'; document.body.style.backgroundColor='none';"><img style="width:30px;height:30px;" src="http://1.bp.blogspot.com/-KThP6cUFOM0/U4Tw9bl3r4I/AAAAAAAA5oM/3KhUehXO86k/s1600/fundoteste.png" /></a>

Atenção! Eu testei e funcionou certinho, mais faça o teste em seu blog, caso não funcione, o seu template pode ter algum tipo de conflito. :(

Então, gostou? Deixe seus comentários. Beijinhos ♥
Me Contrate!


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.