Coloque o gadget que muda o fundo do seu blog.

| | Comentários: 8


Essa dica é bem legal,pois o seu leitor poderá mudar o fundo do seu blog quando ele quiser.O efeito fica muito legal mesmo.Venha aprender!




Olá,queridos amigos!!!

Chegando com uma dica muito legal para vocês blogueiros!!!

Vamos aprender a colocar um gadget que muda o fundo do seu blog.Você escolherá 3 fundos para colocar no gadget, o código será inserido no HTML/JAVASCRIPT, de forma bem fácil.

O resultado é muito legal e o seu leitor poderá mudar o fundo quando quiser.


Para ter o endereço da imagem, você terá que hospedar em algum site de imagens. Eu uso o PICASAWEB. Escolha os fundos no Google, virá muitos!!!

Código encontrado no blog MUNDO DAS MENINAS.


 Vamos então aprender a colocar e alterar o código.

 O código:


<h2 class='title'>Mude o Fundo!!</h2>
<div class='widget-content'>
<style>

#backgrounds a img{
width:40px;
height:40px;
display:inline;
margin-right:10px;
margin-top:15px;
border:2px solid #FFFFFF;
}

#backgrounds a:hover img{
border:2px solid #FFEC8B;
}

</style>

<div id="backgrounds">

<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'></script>

<script>
$(document).ready(function(){
 $("#background01").click(function(){
  

$("body").css({"background":"url(URL DO FUNDO 1)"});
 });
});
$(document).ready(function(){
 $("#background02").click(function(){
  

$("body").css({"background":"url( URL DO FUNDO 2)"});
 });
});
$(document).ready(function(){
 $("#background03").click(function(){
  

$("body").css({"background":"url( URL DO FUNDO 3)"});
 });
});
</script>

<center><a href="javascript:void(O)" id='background01' title="1"><img 

src="URL DO FUNDO 1" /></a>

<a href="javascript:void(O)" id='background02' title="2"><img 

src="URL DO FUNDO 2" /></a>

<a href="javascript:void(O)" id='background03' title="3"><img 

src="URL DO FUNDO 3

/></a></center></div>
</div></div>



 Na parte em azul, você alterará se quiser o tamanho das imagens do fundo que você escolheu.Eu alterei para 70, caso você queira outro tamanho, pode colocar o que quiser.

Na parte rosa, você colocará o endereço da imagem do fundo que você escolheu.Coloque o mesmo endereço da imagem na URL DO FUNDO 1 ( que está acima ) na mesma parte do URL DA IMAGEM na parte de baixo.

Depois SALVE o gadget.

 Veja como ficou no meu blog de testes CÓDIGOS FACÉIS

 Aprenda a hospedar e retirar o endereço da imagem no Picasaweb, clicando aqui.


E ai meus amigos?? Gostaram???
Compartilhem com seus amigos que tem blog e no whatsapp ( link de compartilhamento após a descrição do autor ).Bjssss!!



                       
                                                   
                                                                           

8 comentários:

  1. Oi Magda,adorei mas esse tutorial,vc com toda paciência,tem sempre nos mostra,nos ensina,mas eu tenho tanto medo de mexer nos meus blogs e dá algo errado,tipo estragar e eu ñ conseguir consertar,as vezes até tento,mas o medo me fáz desistir kkkkk Aí como eu sou medrosa!!
    Bjsss

    ResponderExcluir
    Respostas
    1. Olá,amiga!!
      Esse tutorial é muito simples não precisa ter medo.Ele é através do gadget HTML/JAVASCRIPT e você pode tirar quando quiser.Só quando é código no EDITAR HTML que precisa de atenção, por isso fazemos o BACKCUP do layout, caso aconteça algo de errado, você poderá mudar o seu layout para o original.Eu aconselho fazer sempre no blog de teste.Bjsss

      Excluir
  2. Dica maravilhosa, mudar o blog as vezes é necessário, foi um tutorial útil para nós blogueiros, bjs.

    ResponderExcluir
  3. Magda gostei da dica, sempre quis mudar o meu e nunca conseguia

    ResponderExcluir
  4. Taí algo bem bacana, é sempre bom inovar e esse código da essa possibilidade!.
    Adorei mais essa super dica Magda!

    Bjos
    Minda ❤ 😍 👍

    ResponderExcluir
  5. ai que facil quando eu voltar com o blog vou fazer.

    beijinhos

    ResponderExcluir
  6. Já usei muito, mas como o blog tem muito imagem fica pesado.. então dei uma parada,mas é uma boa pedida para o Biologadoblog ou Mundocommaosdeseda.

    ResponderExcluir

Eu agradeço a todos por comentarem no meu blog e assim que for possível, estarei respondendo aos comentários de todos.Bjsss!!