Widget para o visitante mudar as cores do blog
Autor: Joseph Oliveira santos | Publicado: 2011-02-14T08:49:00-08:00


Uma maneira de ter o blog sempre diferente é deixar um widget para que seus visitantes troquem as cores do blog. Para isso é necessário que se modifique alguns itens no blog. Se vc quer que somente a cor de fundo modifique, vá até o HTML de seu blog e procure pelo seguinte trecho:





Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.






body {
background: $bgcolor;
margin:0;
color:#660000;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}




Note que deixei uma parte do código na cor vermelha, não é a toa. Pode ser que em seu blog esteja diferente se ele foi modificado ou se possui uma imagem de fundo, mas o que interessa é que vc terá que apagar todo o código que está na cor vermelha, entende ? Mesmo que o seu esteja diferente, vc terá que apagar.




Salve e vá até "Elementos de página". Clique em "Adicionar um widget" e depois cole o seguinte código:







&lt;form&gt;

&lt;input type="button" value="branco" onclick="document.

bgColor=&amp;#39;#ffffff&amp;#39;" /&gt;

&lt;input type="button" value="preto" onclick="document.

bgColor=&amp;#39;#000000&amp;#39;" /&gt;


&lt;input type="button" value="cinza" onclick="document.

bgColor=&amp;#39;#808080&amp;#39;" /&gt;

&lt;input type="button" value="verde" onclick="document.

bgColor=&amp;#39;#008080&amp;#39;" /&gt;

&lt;input type="button" value="azul" onclick="document.

bgColor=&amp;#39;#B0E0E6&amp;#39;" /&gt;


&lt;input type="button" value="vermelho" onclick="document.

bgColor=&amp;#39;#AD0F22&amp;#39;" /&gt;

&lt;input type="button" value="amarelo" onclick="document.

bgColor=&amp;#39;#F8D328&amp;#39;" /&gt;

&lt;input type="button" value="rosa" onclick="document.

bgColor=&amp;#39;#E4DBE9&amp;#39;" /&gt;


&lt;input type="button" value="laranja" onclick="document.

bgColor=&amp;#39;#FC9B54&amp;#39;" /&gt;

&lt;input type="button" value="lilás" onclick="document.

bgColor=&amp;#39;#C5C6E7&amp;#39;" /&gt;

&lt;input type="button" value="marrom" onclick="document.

bgColor=&amp;#39;#775237&amp;#39;" /&gt;




&lt;/form&gt;



&lt;script&gt;

function initArray() {this.length = initArray.arguments.lengthfor (var i = 0; i &lt; 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 &nbsp; &nbsp; = begin.charAt(0) + begin.charAt(1);


&nbsp;&nbsp;red_valA = parseInt(redA,'16');

&nbsp;&nbsp;redB &nbsp; &nbsp; = end.charAt(0) + end.charAt(1);

&nbsp;&nbsp;red_valB = parseInt(redB,'16');

&nbsp;&nbsp;red_int &nbsp;= ((red_valB - red_valA) / steps) * -1;

&nbsp;&nbsp;grnA &nbsp; &nbsp; = begin.charAt(2) + begin.charAt(3);


&nbsp;&nbsp;grn_valA = parseInt(grnA,'16');

&nbsp;&nbsp;grnB &nbsp; &nbsp; = end.charAt(2) + end.charAt(3);

&nbsp;&nbsp;grn_valB = parseInt(grnB,'16');

&nbsp;&nbsp;grn_int &nbsp;= ((grn_valB - grn_valA) / steps) * -1;

&nbsp;&nbsp;bluA &nbsp; &nbsp; = begin.charAt(4) + begin.charAt(5);


&nbsp;&nbsp;blu_valA = parseInt(bluA,'16');

&nbsp;&nbsp;bluB &nbsp; &nbsp; = end.charAt(4) + end.charAt(5);

&nbsp;&nbsp;blu_valB = parseInt(bluB,'16');

&nbsp;&nbsp;blu_int &nbsp;= ((blu_valB - blu_valA) / steps) * -1;

step = 2;

red = red_valA;grn = grn_valA;blu = blu_valA;

document.bgColor = begin;


while ( steps &gt;= 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);

&nbsp;blu -= blu_int;blu_round = Math.round(blu);blu_hex = Dec2Hex(blu);

document.bgColor = red_hex + grn_hex + blu_hex;

// &nbsp; &nbsp;document.write("&lt;br&gt;bgcolor = " + red_hex + grn_hex + blu_hex);step++;}

document.bgColor = end;}


&lt;/script&gt;