Se você usa cor em seu blog, saiba que muitas vezes há leitores que simplesmente não conseguem ler as postagens. Os motivos podem ser desde dificuldade na leitura por causa do contraste de cores, até uma certa aversão que pessoas sentem por templates/blogs coloridos. Se você não abre mão de independêcia, e daquela corzinha favorita, que tal dar então a opção para que seu leitor modifique a cor de fundo do template ? Para isso, siga as dicas. (Perceba que postei duas opções para sua escolha.)
Vá até o Modelo de seu blog, clique em Editar modelo
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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011 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
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
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUdNT7cPxuL02nF12zJ4ydRZMf6fGlDvG8JJLA6g3bfxAj1jMyg-yIHb2Ox_YV2R91OVlm6ePI6wTxGZs42eGRaJLj-tJPOnQ7lCXlG2mxyOJpZCFyd-EBT8eRFv-83E-3_BXN3muNYUA4/s200/body-rojo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh17hEyNOxPIukEc4ia_gPSrEKU4ahj3XSy8zs6tTzlixe4sHuNlbRpDmuvmbFToq4wV1cnrBrgfyY-oh6-DtXL0c4EWhJiuQW8gUyaS5EqG7-GNMZsX843mE0_kbUYHx5RH1UyePozJRL5/s200/body-amarillo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdYLir3y7w38fSsEOf2Y54hwnggXiwTnh1gTJOMDz1fbPCpF0o0VqX1dQCJbHav-EsspznbcHd_7t1CbllHOTDovRot7n8zuqCNqTUzG5txbdGzU3jy4vME6p5sv9n0Sbzr1V_zNJa7hKa/s200/body-verde.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_EJZ27GwH1MhuCCOrN1styuuN9y4NQuaUUgb1SX1fe3bOO3W2ub-lKf0jVdTlnhpoX3C9Wsh4ryOPLF6vKsuqK4LM0y5Y7Ha71nANo-MAl1TARrw6atFkvCrqJCJDDYY98FCRBr7Eqt5v/s200/body-azul.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-0bstYgYsgtb33sqgLTSSrkKv5s-KapgvUmFcR1Xd4VxrAgKJHOwrU2mATxygKSoOUSWOoGerdILGV9bQHExzTDkfEXzbb6n8dTpLanUjGA6jsutnwuZ1B9JCOvKHfth0oSgqh-xWtnOD/s200/body-morado.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6RNSlkuGtxezfyNGVOrwVuZitT1o3pQHHngc29jB0mNHBmqjNtPSLfAXGPVQ4altcngUsevlENiooaAqiL2x-W432n9tWDUaTGfi4iAiGkY-6Bge2uorfQyJ_31c8h5B_aX-h-ac90fEQ/s200/body-rosa.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcNzIAn8S0uRUOB2ltSiNFIT9iEIkOTteuhJTwQ_gMfmtRBI34JNxEzxt3-kGDo6h9nF3BvBWQ2S5OZKMwRDBdyhyphenhyphenH1WYWTMu1KlTde1LeIZkFGfPgDwQpi9BcJSLNygy1RK7Whzn-hHPx/s200/body-negro.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJKOwUPwPzGB8woxXSuPqy1O_ez3jhUh0CgRQK7XYt2BxKKWLFbcCv2OLif0cPWFuRgua9pdSGs0qAcDzKtzs9kV6n_n9xg0x0rlwh7xzYOyXPGSYbGLFw65fQC1aCMXU7cfLZ1XlUNaPu/s200/body-blanco.png" /></a>
</center>
Se prefere este modelo, o código será esta abaixo:
<form>
<input type="button" value="branco" onclick="document.
bgColor='#ffffff'" />
<input type="button" value="preto" onclick="document.
bgColor='#000000'" />
<input type="button" value="cinza" onclick="document.
bgColor='#808080'" />
<input type="button" value="verde" onclick="document.
bgColor='#008080'" />
<input type="button" value="azul" onclick="document.
bgColor='#B0E0E6'" />
<input type="button" value="vermelho" onclick="document.
bgColor='#AD0F22'" />
<input type="button" value="amarelo" onclick="document.
bgColor='#F8D328'" />
<input type="button" value="rosa" onclick="document.
bgColor='#E4DBE9'" />
<input type="button" value="laranja" onclick="document.
bgColor='#FC9B54'" />
<input type="button" value="lilás" onclick="document.
bgColor='#C5C6E7'" />
<input type="button" value="marrom" onclick="document.
bgColor='#775237'" />
</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 quiser que o fundo do blog fica transparente, dando mais destaque aos backgrounds, procure por:
$(content.background.color.selector) {
background-color: $(content.background.color);
}
E o substitua por este código abaixo:
$(content.background.color.selector) {
background: url(http://www.blogblog.com/1kt/transparent/white80.png) repeat;
}
