02 fevereiro, 2012

3 Tutoriais para personalizar o background do seu blog


Oiii meus Doritos  , ( Gosto muito de doritos )  =D
Hoje vim com 3 tutoriais, super iper mega úteis ( Exagerei --' ), o 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.   Mude o background so seu blog com um click, o 1° era só de cores, este é de backgrounds que você irá escolher. E o 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 ).

7 comentários:

  1. Oie Stela! Seu nome me lembra o nome de uma personagem de JONAS u_u

    Nem sabia que dava pra colocar dois backgrounds em uma página. Que interessante!

    Bjonas e fique com Deus <3

    Camilla Martins - http://sugar-dance.org

    ResponderExcluir
  2. Amei esses tutoriais, bjinhus obg pela tag.

    http://dreamsofagirl-blog.blogspot.com
    http://bubblemagic-blog.blogspot.com << visita, e se gostar segue?

    ResponderExcluir
  3. Você não exagerou não, esses tutorias são super iper mega uteis mesmo, haha'
    Se precisar de algum desses quando for fazer meu novo lay eu corro pra cá :D

    Bjs
    http://blogportalteen.blogspot.com

    ResponderExcluir
  4. Oi fofa obrigada pela visita nos blogs , jah vou postar a tag ;) Bjs

    http://dreamsofagirl-blog.blogspot.com
    http://bubblemagic-blog.blogspot.com

    ResponderExcluir
  5. Eu to bem com só 1 bg's mesmo, ahauhauha
    Beijo
    Tem novo post no Bombastic

    www.blogbombaastic.blogspot.com

    ResponderExcluir
  6. jura que faz isso por mim? haha'
    brigada <3
    vou aguardar o tuto anciosa (:

    Bjs
    http://blogportalteen.blogspot.com

    ResponderExcluir
  7. Tutos super legais,quando precisar é só dá uma olhada por aqui!!!
    Vlw pela visita Stela. bjoss

    ResponderExcluir