Seguidores

Pesquisar este blog

quarta-feira, 30 de maio de 2012

0

Como mudar o fundo do blog em um só click?

 http://4.bp.blogspot.com/-qTHClJBHkac/T2-UQ-PegkI/AAAAAAAANyg/jsLs9xei8Hg/s640/Imagens-cute-casais-amor-paix%C3%A3o-beijo-amor-brushes-illustra%C3%A7%C3%B5es-fuck-yeahhgif-download-FREBIEScandy-imagens-tumblr-nails+tumblr-cute-candy-brushes-photoscape-by-thata-schultz007.jpg

Ola queridos(as),  hoje postarei um tutorial super bacana. O tutorial ensina como mudar o background do seu blog com apenas um clique! E como? Só acompanhar o tutorial. Veja um exemplo aqui. Primeiramente você vai até Design e continue em Elementos da página, agora clique no link abaixo para fazer o tuto.

Clique em: 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 #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(http://i748.photobucket.com/albums/xx122/luuuh/backgrounds/maenvenenadabackgrounds46.gif)"});
});
});
$(document).ready(function(){
$("#bgcolor2").click(function(){
$("body").css({"background":"url(http://i748.photobucket.com/albums/xx122/luuuh/backgrounds/maenvenenadabackgrounds36.gif)"});
});
});
$(document).ready(function(){
$("#bgcolor3").click(function(){
$("body").css({"background":"url(http://i748.photobucket.com/albums/xx122/luuuh/backgrounds/03.png)"});
});
});
</script>
<center><a href="javascript:void(O)" id='bgcolor1' title="Normal"><img src="http://i748.photobucket.com/albums/xx122/luuuh/backgrounds/maenvenenadabackgrounds46.gif" /></a>
<a href="javascript:void(O)" id='bgcolor2' title="Título Aqui"><img src="http://i748.photobucket.com/albums/xx122/luuuh/backgrounds/maenvenenadabackgrounds36.gif" /></a>
<a href="javascript:void(O)" id='bgcolor3' title="Título Aqui"><img src="http://i748.photobucket.com/albums/xx122/luuuh/backgrounds/03.png" /></a></center>
</div>
 Agora vamos fazer as devidas modificações:
  • Laranja, você irá colocar a url do fundo 1, as cores se repetem então nos dois a mesmo url;
  • Verde, é a url do segundo fundo, as cores se repetem, então nos dois a mesma url;
  • Bordô é são as url's do terceiro fundo. Repita o mesmo processo das cores laranja e verde;
  • Já em Itálico serão o título do BG ao passar o mouse;
  • Lilás é o estilo da borda sem passar o mouse;
  • Azul é o estilo da borda ao passar o mouse.
Bom, espero que tenham gostado do tutorial, é rápido, fácil e super legal. Podem fazer pedidos de tutoriais, eirei anotar todos. Beijinhos, Jess.

Nenhum comentário:

LinkWithin

Related Posts Plugin for WordPress, Blogger...