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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQljOV6LVasU0zoetR25fZ27R_UJ-0U0pdJRi8TH_g7g3MpViM9vqxKVHeJ38Dp-pQBVtnvZQtPxpA6tFp5GbkO5nWd7qmRhUptRItIXrYjGARPMguTxk6HhceRfE8pBtj4Uy3urBzKsBA/s200/body-rojo.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLyyZmnsBdqnje8S0ywkZSyq57vT1HxjkkatQxPdiQHwZ4EvaXiLnMdCWXg8BWS3vLFUvm2LI5uLV_E1IeFEYbhBczsj2ZrMJxgy1_Aj-NocLSdynF7VMJzSXMYCE6onb8F5VWt0-SznSJ/s200/body-amarillo.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuc290nFZWSR11puA2sShY7RBa-YhGHoOmubtS6c_bM3YJkc3ZJRnwjiMLhVoeYvrh8phlaq-PUl-Ec2oViu7KcqbztXv0cK_Q5G0DGJ-1ko8p-qu3ClfE0nHygEQ44YuRqnk3PLvOs0WU/s200/body-verde.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2U5b8sLxHNb2LS4UMLp_G5biwOdby0JJI0zuU7SeTjaKLy803Q7SW04aYgLd7Y8PQMtPAZHjIAnn1LncOv0ULb8JCMbaAiBvbHwjhBDNA8puk1mtfNaBYwpI46SMEjMI-qb8dw2LnPumX/s200/body-azul.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB3uX_lChYmeoFhJABb5aoawb9I2UI-dn8fc4Aqa2FArvyCj3-RxWs7H4QOpMmZg-SFKnwTvCvrL9TbCS2adbKB7LcU9kE0_ZUc4qwR-RVFgebqAVLi9ovPyzy13xNJW4p3292tC7RMIBO/s200/body-morado.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCToAZs5HoRcf5u7FoJwjed3UfCh42jlnplxMBt3Dmfvn93Dr5rkLDRfijNPn5zSp3SI5KrzNbJGTscaFtUu6anp6CehmoiQhhoOSFSOvF7qnzdv69ZUrWcnPyT6isIuIqD0OqvvGQMsNK/s200/body-rosa.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilvmo2zavseRQN4OfCcwFGotqS1UnU6DHlzXmr6cObWwV6yzHsbRt719QH6dHCwtIdnVBoBzwfDgad6tEVlJmOsz5mbLKfoFsNmt5PM48B50xWGn3N5ZV1QyE11W8rKAyblfAYbvbUZFZZ/s200/body-negro.png" /></a><a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvAtJVHMvSuAa5Wb7KcqIn10H-8jXRijcUqhSefUN8gqtE5rYRpW4D3YyzjtUhXsu9AjSOzdTQiuVJ_ImXYukBT-guzPT3FtXCxJ2bvOxQ8qznJbVOTHtFOyzsCGLD4Un-_wz3qHFQ0U8p/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 ).