29 de ago de 2011

Mudando fundo do blog em um click

Tumblr_lqntottekq1qjzvcco1_500_large

Como o prometido hoje postarei um tutorial super bacana que eu achei no Trashy Girl — portanto, os seus devidos créditos. 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. E não copiem esse post sem falar com a Juu (dona do TG) ok? O código foi totalmente feito por ela. Continuem fazendo pedidos de tutoriais, estou anotando todos. E tem 3 novos avatares e um novo estilo de título de sidebar! Além disso, vem surpresa por aí... Beijinhos, Emily.

20 comentários:

  1. Ja tinha achado esse tuto no Dicas Blogger, procurei depois que vi no Trashy Girl. Vou colocar no meu próximo lay! :D
    Emily, eu venho aqui todo dia mas so pude ver o novo lay hoje, PER FE I TO. Sério!
    Uma dúvida cruel, você colocou um efeitinho nos links, de fade colorida. Ensina como fazer?
    E outra. Onde achasse esses icones liiindos que usasse nos lays? Bjs!
    http://girlson-line.blogspot.com/

    ResponderExcluir
  2. Amei, vou usar no meu próximo lay! Será que tem como ensinar a fazer um menu afiliados com imagens? beijos :*
    goimagines.blogspot.com

    ResponderExcluir
  3. Heey flor ! Agora sim está TUDO mudado , desculpe o incomodo awe!
    Bjão,
    http://blogdasgarotasby.blogspot.com/

    ResponderExcluir
  4. Nossa, eu sabia que era fácil por links nos coments, mas eu aqui não sabia, haha.
    Obrigada!

    Beijos!
    http://blog-mundo-da-moda.blogspot.com/

    ResponderExcluir
  5. hahahah acho que ou ta errado, ou o blogger esta me comediando -.-
    mas obg assim mesmo :D
    vem cá, faz um tuto como coloca essas imagens no lado direito do post, tipo "tutotiais" cada tag tem sua imagem...ADOREI
    pode me add no msn?
    adoro fazer novas amigas blogueiras :D

    ResponderExcluir
  6. Oi eu entendi bem e desculpa pela pergunta que pensando bem foi muito idiota ¬¬ o meu lay já está terminado, deixei a coluna transparente, mas caso se incomode eu posso colocar uma cor numa boa ok? Bom acho que o restante do lay não está igual, mas qualquer coisa comenta que eu mudo, mas também nunca que eu ia conseguir copiar o seu blog perfect né? rsrs no bom sentindo claro.

    Visita, e lê o post? Lá estão os créditos e seu blog está lá, caso eu esteja utilizando algo seu sem ter posto lá, já sabe comenta rsrs

    http://meninasapeca-ms.blogspot.com/2011/08/voltei-dcreditos.html

    Bjos e muito obrigada!

    ResponderExcluir
  7. OMG!Emily vc me salvou :)
    tava procurando esse tuto á seculos,
    obg :)

    Bjs,
    www.goodies-portalteen.blogspot.com

    ResponderExcluir
  8. Ah adorei, depois vou fazer lá no blog.
    Visita e comenta?
    http://girlteen-s2.blogspot.com/

    ResponderExcluir
  9. Eu lembro de ter visto o tuto por lá, mas não estava achando. Tinha procurado na página de goodies mas não estava lá, mas agora procurei melhor e achei na tag dicas. Obrigado fofa!
    goimagines.blogspot.com

    ResponderExcluir
  10. Oi pedido atendido, já coloquei uma corzinha lá na coluna, posso deixar o background né? É que não tenho outra opção rsrs, desculpa pelos transtornos bjos, e qualquer coisa fala :D
    http://meninasapeca-ms.blogspot.com/

    ResponderExcluir
  11. adoro o blog, demais! e já estou usando esse tutorial *-*
    http://beijofosco.blogspot.com/

    ResponderExcluir
  12. Amei o tutorial, a tempos eu procurava um tutorial que ensinasse isso, para as pessoas poderem ter o fundo de acordo com o gosto que preferir!
    Beijos

    http://www.thifanygrgomes.blogspot.com.br/

    ResponderExcluir
  13. Tem um agradecimento pra você no meu blog
    http://meninaeseuestilo.blogspot.com.br/2013/01/omenagem-aos-blog-que-me-ajudaram.html

    ResponderExcluir
  14. Deu certo @@
    http://blogdapaulinhacss.blogspot.com

    ResponderExcluir
  15. Ficou muito bom e ficou melhor ainda por que eu coloquei em baixo do cabeçalho!

    ResponderExcluir

Comentários como "o blog tá lindo, bjo" "to seguindo, segue de volta??" "ai que lindo o blog, retribui a visita/comentário?" serão ignorados. Por favor, leia a FAQ e as outras páginas internas antes de perguntar qualquer coisa.