10 junho 2012

TUTORIAL- Deixar o visitante mudar a cor do fundo

Para ver como fica carrega aqui
O visitante pode não ter o mesmo gosto que nós, faz de conta que a minha cor preferida é verde e o visitante odeia verde. Estar num blog só assim não devia ser divertido. Então este tutorial permite deixar o visitante escolher a cor. Vamos começar:
Procure por:

body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)



 E apague a parte em vermelho                                                                                                               Ler mais -> -> ->



Procure agora por:

 .body-fauxcolumn-outer .fauxcolumn-inner {
  background: transparent $(body.background.gradient.tile) repeat scroll top left;
  _background-image: none;

}

E apague novamente a parte em vermelho

Procure por:

.body-fauxcolumn-outer .cap-top {
  position: absolute;
  z-index: 1;
  height: 400px;
  width: 100%;
  background: $(body.background);
  $(body.background.override)

}


Apague a parte em vermelho

Procure então por:

.body-fauxcolumn-outer .cap-top .cap-left {
  width: 100%;
  background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
  _background-image: none;

}

Apague a parte em vermelho e salve.





Agora clique em Layout

Clique em Adicionar um Gadegt



Ao abrir, clique em  HTML/Javascript





DEMO

Cole então o próximo código

<div style="text-align:center;">Troque a cor do blog</div><br /><center>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';"><img src="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TTX4H60I/AAAAAAAAAJU/qYc4BYZclgg/s200/body-rojo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TK7730eI/AAAAAAAAAIs/3v5O2GDrs1s/s200/body-amarillo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TTyfDggI/AAAAAAAAAJk/9x17-Ec7Dnw/s200/body-verde.png" /></a>

<a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"><img src="http://4.bp.blogspot.com/_dsEG33PDaHw/S32TLXeztWI/AAAAAAAAAI0/7hWfrfWsdKU/s200/body-azul.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMB5SOXI/AAAAAAAAAJE/PRMfKVBj6fM/s200/body-morado.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';"><img src="http://1.bp.blogspot.com/_dsEG33PDaHw/S32TTl7vW9I/AAAAAAAAAJc/GHdXgYyF4Ro/s200/body-rosa.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TMY3FA9I/AAAAAAAAAJM/6Hx0CAagVOQ/s200/body-negro.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img src="http://2.bp.blogspot.com/_dsEG33PDaHw/S32TLuZ0f1I/AAAAAAAAAI8/r1AHB4GpoPQ/s200/body-blanco.png" /></a>
</center>



DEMO

Se prefere este modelo, o código será esta abaixo:

<form>
<input type="button" value="branco" onclick="document.
bgColor=&#39;#ffffff&#39;" />
<input type="button" value="preto" onclick="document.
bgColor=&#39;#000000&#39;" />
<input type="button" value="cinza" onclick="document.
bgColor=&#39;#808080&#39;" />
<input type="button" value="verde" onclick="document.
bgColor=&#39;#008080&#39;" />
<input type="button" value="azul" onclick="document.
bgColor=&#39;#B0E0E6&#39;" />
<input type="button" value="vermelho" onclick="document.
bgColor=&#39;#AD0F22&#39;" />
<input type="button" value="amarelo" onclick="document.
bgColor=&#39;#F8D328&#39;" />
<input type="button" value="rosa" onclick="document.
bgColor=&#39;#E4DBE9&#39;" />
<input type="button" value="laranja" onclick="document.
bgColor=&#39;#FC9B54&#39;" />
<input type="button" value="lilás" onclick="document.
bgColor=&#39;#C5C6E7&#39;" />
<input type="button" value="marrom" onclick="document.
bgColor=&#39;#775237&#39;" />
</form>

<script>
function initArray() {this.length = initArray.arguments.lengthfor (var i = 0; i < this.length; i++)this[i+1] = initArray.arguments[i]}
var hexChars = "0123456789ABCDEF";
function Dec2Hex (Dec) {var a = Dec % 16;var b = (Dec - a)/16;hex = "" + hexChars.charAt(b) + hexChars.charAt(a);return hex;
}

function bgChanger (begin, end, steps) {steps = steps -1 ;redA     = begin.charAt(0) + begin.charAt(1);
  red_valA = parseInt(redA,'16');
  redB     = end.charAt(0) + end.charAt(1);
  red_valB = parseInt(redB,'16');
  red_int  = ((red_valB - red_valA) / steps) * -1;
  grnA     = begin.charAt(2) + begin.charAt(3);
  grn_valA = parseInt(grnA,'16');
  grnB     = end.charAt(2) + end.charAt(3);
  grn_valB = parseInt(grnB,'16');
  grn_int  = ((grn_valB - grn_valA) / steps) * -1;
  bluA     = begin.charAt(4) + begin.charAt(5);
  blu_valA = parseInt(bluA,'16');
  bluB     = end.charAt(4) + end.charAt(5);
  blu_valB = parseInt(bluB,'16');
  blu_int  = ((blu_valB - blu_valA) / steps) * -1;
step = 2;
red = red_valA;grn = grn_valA;blu = blu_valA;
document.bgColor = begin;
while ( steps >= step ) {red -= white_int;red_round = Math.round(white);red_hex = Dec2Hex(white);
grn -= grn_int;grn_round = Math.round(grn);grn_hex = Dec2Hex(grn);
 blu -= blu_int;blu_round = Math.round(blu);blu_hex = Dec2Hex(blu);
document.bgColor = red_hex + grn_hex + blu_hex;
//    document.write("<br>bgcolor = " + red_hex + grn_hex + blu_hex);step++;}

document.bgColor = end;}
</script>
Se tentou, comente o resultado ;)

Sem comentários:

Enviar um comentário