10 de agosto de 2013

Como colocar gadget para leitores mudar o background?


   Oi meu povo, saudades de postar, é estou meia desanimada nas postagens, preciso de opiniões, críticas construtivas, e simplesmente amor ok? Haha, brincadeira, mas é sério, peçam postagens na Ask do blog ali na barra lateral, e continue lendo a postagem!


Bom, é super simples:


Vá em Layout, depois Adicionar Gadget e selecione HTML/ Java Script. Depois cole o seguinte código:

                                       


<style>
#backgrounds a img{
width:60px;
height:50px;
display:inline;
margin-right:10px;
margin-top:15px;
border: 2px solid #FFC0CB;
}
#backgrounds a:hover img{
-webkit-filter:grayscale(1);-webkit-transition:all 1s ease;border: 2px solid #
FFC0CB;
}
</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 aqui 1)"});
 });
});
$(document).ready(function(){
 $("#background02").click(function(){
  $("body").css({"background":"url(
Url aqui 2)"});
 });
});
$(document).ready(function(){
 $("#background03").click(function(){
  $("body").css({"background":"url(
Url aqui 3)"});
 });
});
</script>
<center><a href="javascript:void(O)" id='background01' title="
Nome ao passar 1"><img src="http://static.tumblr.com/dlelfro/xpzmpkivr/1046.png" /></a>
<a href="javascript:void(O)" id='background02' title="Nome ao passar 2"><img src="http://static.tumblr.com/dlelfro/OsJmpkiu1/1045.png" /></a>
<a href="javascript:void(O)" id='background03' title=" Nome ao passar 3 "><img src="http://static.tumblr.com/dlelfro/5PBmpkix7/1049.png" /></a></center></div>


                                    

Explicação:  


            FFC0CB - Cor


           Url aqui 1 - Url do background 1

  
           Url aqui 2 - Url do background 2 

           Url aqui 3 - Url do background 3         


           Nome ao passar 1 -  Explicação 1
             
           Nome ao passar 2 -  Explicação 2
  
           Nome ao passar 3 -  Explicação 3



   Bom é esse o tutorial, gostaram? Lembrando: Créditos ao Kawaii Word ok? Se usarem, o creditem! 
   Beijos e até o próximo post!

6 comentários:

  1. Super amei o blog , é... mais acho que n ficaria legal no meu blog . bjão te segui linda dá uma passadinha la no blog e se vc gostar segue
    http://belaeabusada.blogspot.com

    ResponderExcluir
  2. Oi linda tem selinho lá no meu blog pra você pequenodiamantteazul.blogspot.com.br espero que você goste

    ResponderExcluir
  3. Esse tutorial é super legal!
    Amei!
    Beijos!
    Batom de Framboesa
    Fica com Deus!

    ResponderExcluir
  4. Adorei o tutorial, lindo teu blog.
    Da uma passadinha no meu?
    Segue se gostar?
    http://theworldoflena.blogspot.com.br/

    ResponderExcluir
  5. Eu já conhecia o tutorial é muito bom.

    Beijos

    blogdagi1.blogspot.com.br

    ResponderExcluir
  6. o meu deu certinho , obrigada

    http://menina-gentil.blogspot.com.br/

    ResponderExcluir

Seja bem-vinda (o) ao Teimosa Sim! Deixe seu comentário, vou amar!
- Deixe a URL do seu blog/site;

Sinta-se a vontade, siga para receber as novidades e fique por dentro de tudo!

Instagram: @tainara_galhardo
Twitter: @pqp_taaah
Page: Teimosa Sim (curte lá!)

.
© Teimosa Sim Copyright 2015 | Todos os direitos reservados.
Desenvolvido por: Tainara Galhardo.
Tecnologia do Blogger.
imagem-logo