3 Tutoriais para personalizar o background do seu blog

Oiii meus Doritos  , ( Gosto muito de doritos )  =DHoje vim com 3 tutoriais, super iper mega úteis ( Exagerei --' ), o 1° vai ser como colocar Caixa de cores que trocam o background  do seu blog ao clicar. Se você está confundido, depois no neste tutorial, vou mostar um exemplo.  2° Mude o background so seu blog com um click, o 1° era só de cores, este é de backgrounds que você irá escolher. E o 3° vou enisnar a colocar 2 backgrounds no blog, gente antes vou dar os créditos aos blogs que achei estes tutoriais, em ordem dos tutoriais.Créditos a : Vamos Combinar  |  Trashy Girl  |  Blog das Meninas
PARA VER OS TUTORIAIS, CLIQUE EM READ MORE

Vamos ao tuto :  ComoColocar Caixa de Cores que Trocam o Background  do seu blog ao clicar
Exemplo : Vá em Design > Elementos da página > Adicionar um Gadget, e adicione o HTML / JavaScript, e cole o seguinte código :

<div style="text-align:center;">Troque a cor do blog</div><br /><center><a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';"><img src="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TTX4H60I/AAAAAAAAAJU/qYc4BYZclgg/s200/body-rojo.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TK7730eI/AAAAAAAAAIs/3v5O2GDrs1s/s200/body-amarillo.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TTyfDggI/AAAAAAAAAJk/9x17-Ec7Dnw/s200/body-verde.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"><img src="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TLXeztWI/AAAAAAAAAI0/7hWfrfWsdKU/s200/body-azul.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMB5SOXI/AAAAAAAAAJE/PRMfKVBj6fM/s200/body-morado.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';"><img src="http://1.bp.blogspot.com/_dsEG33PDaHw/S32TTl7vW9I/AAAAAAAAAJc/GHdXgYyF4Ro/s200/body-rosa.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMY3FA9I/AAAAAAAAAJM/6Hx0CAagVOQ/s200/body-negro.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TLuZ0f1I/AAAAAAAAAI8/r1AHB4GpoPQ/s200/body-blanco.png" /></a></center>

Salve e prontinho.

Mude o background do seu blog, com um click.

Vá em Design > Elementos da página > Adicionar um Gadget, e adicione o HTML / JavaScript, e cole o seguinte código :  

<style>
#estilo a img{
width:40px;
height:40px;
display:inline;
margin-right:10px;
margin-top:15px;
border: 2px solid #EEE;
}

#estilo a:hover img{
border: 2px solid #bdebff;
}


</style>
<div id="estilo">
<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'></script>
<script>
$(document).ready(function(){
$("#bgcolor1").click(function(){
$("body").css({"background":"url(URL DA IMAGEM 1)"});
});
});
$(document).ready(function(){
$("#bgcolor2").click(function(){
$("body").css({"background":"url(URL DA IMAGEM 2)"});
});
});
$(document).ready(function(){
$("#bgcolor3").click(function(){
$("body").css({"background":"url(URL DA IMAGEM 3)"});
});
});
</script>


<center><a href="javascript:void(O)" id='bgcolor1' title="TÍTULO DA PRIMEIRA IMAGEM"><img src="URL DA PRIMEIRA IMAGEM, NOVAMENTE" /></a>
<a href="javascript:void(O)" id='bgcolor2' title="TÍTULO DA SEGUNDA IMAGEM"><img src="URL DA SEGUNDA IMAGEM, NOVAMENTE" /></a>
<a href="javascript:void(O)" id='bgcolor3' title="TÍTULO DA TERCEIRA IMAGEM"><img src="URL DA PRIMEIRA IMAGEM, NOVAMENTE" /></a></center>

Agora edite de acordo :


Vermelho - Você irá colocar a url do fundo1, as cores se repetem então nos dois a mesmo url
Laranja - Você irá colocar a url do fundo2, as cores se repetem então nos dois a mesmo url
Verde - Você irá colocar a url do fundo3, as cores se repetem então nos dois a mesmo url

Rosa - Quando passarem o mouse sobre a imagem irá aparecer uma janelinha escrito o que você quer que seja escrito então edite...

Lilás - Estilo da borda sem passar o mouse
Azul - Estilo da borda ao passar o mouse

Como colocar 2 backgrounds no blogger

Exemplo :


Vá em Design > Editar HTML > Dê CTRL + F > e procure por :

body { 

Deverá aparecer algo parecido com isso :

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}

Apague todo este trecho e no lugar cole o código abaixo :

body, html {
height: 295px;
margin: 0;
padding: 0; }

body {
background: url("URL do 1º background") repeat; }

html {
background: url("URL do 2º background") repeat; }

Onde está URL do 1° background , cole o url da imagem que você quer quer apareça na parte de cima.
Onde está URL do 2° background , cole o url da imagem que você quer quer apareça na parte de baixo.

A parte que está em Roxo (295) você troca para o tamanho que quiser, pois é o tamanho do 1° background.

Gente por hoje é só, até o próximo post meus leitores, Beijão da Sweet ( Stela ).