Olá bem bem vindo ao aAconteceu depois dos 14!

Siga-nos nas redes sociais.

¡Suscríbete a nuestro blog!

Recibe en tu correo las últimas noticias del blog. Sólo ingresa tu correo para suscribirte.

Anuncie

13 de set de 2012

(Tutorial) Colocando backgrounds para trocar ao clicar

Olá meninas! Bem a nossa querida seguidora e leitora aqui do blog Victoria Secrets viu este gadget que uso aqui no blog e perguntou como faz pra colocar no blog, e eu vou ensinar! O gadget é o escolha o fundo do blog ^^, Vamos lá?

Primeiramente entre na sua conta do blog (Dãaaaaaaan)

Vá em design >Elementos de Página> Adicionar um gadget> HTML/javascript e cole o código abaixo:

<style>
#estilo a img{
width:40px;
height:40px;
display:inline;
margin-right:10px;
margin-top:15px;
border: 2px solid #FFF; }
#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( cole aqui o link da imagem do seu 1 background )"});
});
});
$(document).ready(function(){
$("#bgcolor2").click(function(){
$("body").css({"background":"url( cole aqui o link da imagem do seu 2 background )"});
});
});
$(document).ready(function(){
$("#bgcolor3").click(function(){
$("body").css({"background":"url( cole aqui o link da imagem do seu 3 background )"});
});
});
</script>
<center><a href="javascript:void(O)" id='bgcolor1' title="Titulo aqui"><img src=" cole aqui novamente o link da imagem do seu 1 background" /></a>
<a href="javascript:void(O)" id='bgcolor2' title="Título Aqui"><img src=" cole aqui o link da imagem do seu 2 background " /></a>
<a href="javascript:void(O)" id='bgcolor3' title="Título Aqui"><img src="cole aqui novamente o link da imagem do seu 3 background" /></a></center>
</div>

Bem eu colori um pouquinho o código pra você entender onde pode e deve mudar!

Cores iguais é para colocar o mesmo código!

  1. Em Azul = É pra colocar o link da primeira imagem;
  2. Em Vermelho = É para colocar o link da sua segunda imagem;
  3. Em roxo= É para colocar o link da terceira imagem;

Explicando o código: A primeira parte do código  que vai de <style> a <\style>

está personalizando as miniaturas das imagens(como altura, largura…). Em # estilo a img{ está personalizando a miniatura da imagem (tumbnails), e em # estilo a:hover img{ mostra quando o mouse está em cima, qual efeito que terá, então você pode personalizar o tipo de borda, o tamanho da borda etc.

A segunda parte do código só coloque o link das imagens, que serão colocadas nas cores correspondentes, e na terceira parte do código, são os códigos das imagens miniaturas que deverá ser os mesmos das imagens acima na ordem que está, é só substituir pela url, igual fez no primeiro link. Smiley piscando

 

Resumindo, se você quiser um igual ao meu é só trocar as cores pelos links das suas imagens xD! E onde eu acho imagens para o fundo TIA Lud?

Aqui, Aqui e Aqui

Victória Secrets espero que tenha te ajudado com esse script ^^ e a todos que precisarem dele também!

Beijus até a próxima postagem

3 comentários:

  1. Nossa muito obrigada vou tentar colocar ainda hoje no meu , bjos ate mais .

    ResponderExcluir
  2. oiiii.
    blz? seu blog está mt maneiro!
    vim aqui pra t avisa q meu blog agora tem tirinhas! pode comentar lah? aqui:
    http://oblogdapp.blogspot.com.br/2012/09/tirinha-1.html
    mt obg pelo coment viu?!

    ResponderExcluir
  3. Nossa,achei muito interessante.Tô pensando em colocar no meu!Adoro novidade!Obrigada por responder lá no meu blog.bjs

    ResponderExcluir

* Gostou do Post ? Por Favor, comente.
* Não precisa de confirmar as postagens com os códigos.
* Dicas, sugestões e críticas sempre são bem-vindas.
* Comente sobre o conteúdo do blog, antes de sair divulgando o seu.
* Palavras ofensivas, ou texto totalmente em caixa alta, não serão publicados, exceto se tiver um conteúdo relevante.
* Agradecemos de coração a sua visita, e iremos visitar seu blog, site, redes sociais também( se vc deixar o link)! Será um prazer.