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

14 de jul de 2013

Tutorial gadget que muda background e faixinhas da lateral

orange-caramel-4e9d5a1e458ef

ORANGE CARAMEL <3

Olá gente! Ontem eu postei um tutorial de um gadget que iria mudar o seu layout para os novos modelos dinâmicos. O que acho super divo,  mas não atende a todos, que as vezes gostariam apenas de mudar o seu layout personalizado. Eu já postei aqui o tutorial que muda apenas um fundo do blog. Hoje postarei um que muda dois backgrounds e um que além dois backgrounds mudamas faixas :

 

Mudar dois backgrounds:

Você vai adicionar o código em um gadget então: Vai no seu painel >> Layout >> adicionar gadget >> html/javascript e cole o código :

 

<style>

#backgrounds a img{

width:50px;

height:50px;

display:inline;

margin-right:10px;

margin-top:15px;

border:2px solid #COR-DA-BORDA-;

}

#backgrounds a:hover img{

border:2px solid #COR-DA-BORDA-HOVER;

}

</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(BACKGROUND-DE-CIMA)"});

});

});

$(document).ready(function(){

$("#background01").click(function(){

$("html").css({"background":"url(BACKGROUND-DE-BAIXO)"});

});

});

$(document).ready(function(){

$("#background02").click(function(){

$("body").css({"background":"url(BACKGROUND-DE-CIMA-2)"});

});

});

$(document).ready(function(){

$("#background02").click(function(){

$("html").css({"background":"url(BACKGROUND-DE-BAIXO-2)"});

});

});

$(document).ready(function(){

$("#background03").click(function(){

$("body").css({"background":"url(BACKGROUND-DE-CIMA-3)"});

});

});

$(document).ready(function(){

$("#background03").click(function(){

$("html").css({"background":"url(BACKGROUND-DE-BAIXO-3)"});

});

});

</script>

 

<center><a href="javascript:void(O)" id='background01' title="TÍTULO-DO-BACK-1"> <img src="IMAGEM-DO-BACK-1" /></a>

<a href="javascript:void(O)" id='background02' title="TÍTULO-DO-BACK-2"><img src="IMAGEM-DO-BACK-2"/></a>

<a href="javascript:void(O)" id='background03' title="TÍTULO-DO-BACK-3"><img src="IMAGEM-DO-BACK-3" /></a>

</center></div>

 

 

Eu ia explicar esse código mais acho que dispensa um pouco de explicação se analisarem um pouco e entender html vai entender o que esta acontecendo.

Aonde está marcado de azul você vai trocar a primeira pela cor da borda, e o segundo a cor da borda mudara quando passar o mouse.

As cores iguais do restante do código significa que quando você clicar na imagem 1, vai mudar para os dois códigos de background que estão em vermelho, e assim por diante.

________________________________♥______________________________________

O segundo código além de mudar os dois background ele tbm muda as faixinhas da sidebar:

 

 

<style>

#backgrounds a img{

width:50px;

height:50px;

display:inline;

margin-right:10px;

margin-top:15px;

border:2px solid #COR-DA-BORDA-;

}

#backgrounds a:hover img{

border:2px solid #COR-DA-BORDA-HOVER;

}

</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(BACKGROUND-DE-CIMA)"});

});

});

$(document).ready(function(){

$("#background01").click(function(){

$("html").css({"background":"url(BACKGROUND-DE-BAIXO)"});

});

});

$(document).ready(function(){

$("#background01").click(function(){

$(".sidebar .widget h2").css({"background":"url(URL-DA-FAIXINHA)no-repeat"});

});

});

$(document).ready(function(){

$("#background02").click(function(){

$("body").css({"background":"url(BACKGROUND-DE-CIMA-2)"});

});

});

$(document).ready(function(){

$("#background02").click(function(){

$("html").css({"background":"url(BACKGROUND-DE-BAIXO-2)"});

});

});

$(document).ready(function(){

$("#background02").click(function(){

$(".sidebar .widget h2").css({"background":"url(URL-DA-FAIXINHA-2)no-repeat"});

});

});

$(document).ready(function(){

$("#background03").click(function(){

$("body").css({"background":"url(BACKGROUND-DE-CIMA-3)"});

});

});

$(document).ready(function(){

$("#background03").click(function(){

$("html").css({"background":"url(BACKGROUND-DE-BAIXO-3)"});

});

});

$(document).ready(function(){

$("#background03").click(function(){

$(".sidebar .widget h2").css({"background":"url(URL-DA-FAIXINHA-3)no-repeat"});

});

});

</script>

<center><a href="javascript:void(O)" id='background01' title="TÍTULO-DO-BACK-1"> <img src="IMAGEM-DO-BACK-1" /></a>

<a href="javascript:void(O)" id='background02' title="TÍTULO-DO-BACK-2"><img src="IMAGEM-DO-BACK-2"/></a>

<a href="javascript:void(O)" id='background03' title="TÍTULO-DO-BACK-3"><img src="IMAGEM-DO-BACK-3" /></a>

</center></div>

 

Espero que vocês gostem e que seja úteis nos seus designs. Aprendi esse tutorial no: Tutoriais Rokawaiis.


Obrigada pela visita e voltem sempre!

6 comentários:

  1. Muito legal esses tutoriais,além de super fáceis,são ótimos para o leitor escolher qual background eles gostam mais.Achei muito legal poder mudar também as faixinhas com um clique,adorei!
    Boa semana para você!
    quemprecisadetvparaverbeyonce.blogspot.com.br
    Beijos

    ResponderExcluir
    Respostas
    1. Sim, eu sempre fico em dúvida em qual background vou escolher e tudo mais, com esses tutoriais eu consigo montar, mais do que um layout e os visitantes verem como ficaria com esse tipo de mudança ao clicar!
      :D

      Beijos obrigada pela visita!

      Excluir
  2. Nossa,gostei muito.mudando os backgrounds e as faixas até parece que muda o template.Gostei,acho que vou usar.ÓTImo post.não sabia que dava pra mudar assim.beijos
    summerscomicsworld.blogspot.com.br

    ResponderExcluir
  3. Eu também não sabia aushsuuhs, foi procurando pelo efeito de mudar o layout pto dinâmico que aí conheci essa outra parte, num blog de uma seguidora. Nossa e assim percebi que dá pra mudar praticamente o layout inteiro é só saber o nome da tag que você quer mudar. Tipo: .sidebar .widget h2, etc ... Obrigada pela visita :D

    ResponderExcluir
  4. Gente que layout mais diwônico é esse!Eu amei de mais <3
    Ah,e sim aceito a parceria...Fui na página 'parcerias' fiz o que mandava,e agora faço algo à mais?

    Cherebebel.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada linda! QUE BOM QUE GOSTOU, fico muito feliz. Seu layout é muito lindo! :D Respondi no seu blog :D

      Excluir

* 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.