Mudar cores de fonte e fundo de Reações e gadget de Votar com estrelas no BlogSpot

Mostrarei códigos do blogger para mudar as cores de fonte e fundo da opção Reações do usuário e da opção de votar(classificação com estrelas).
Imagens de exemplo

Apenas em últimos casos, alguns modelos podem ter a cor de fundo igual a cor da fonte no 'gadget reações', isso torna impossível alguém opinar porque não consegue enxergar a palavra, existe algumas coisas que podem ser tentadas.

É possível mudar as cores das palavras que estão próximo ao botões reações, aquelas palavras que as pessoas poderão votar, opinar se o post é bom, ruim, engraçado... palavras que você escolheu, quando adicionou Reações do visitante no blogspot.

Isso poderá alterar outras cores de fonte no seu modelo, inclusive da função Votar ou classificar com estrelas o post do blogger

Dica: Pressione as 2 teclas de atalho Ctrl + F para localizar palavras em uma página.

Para isso, é preciso muito cuidado e dedicação, o bom disso tudo é que algumas coisas que você aprender aqui talvez servirá para fazer algo parecido no futuro e já estará sabendo, também é um tremendo exercício cerebral.

Primeiro é essencial fazer um backup de seu código(clique e veja como) e, de preferência, fazer em um blog de testes para praticar. Porque um caracter a mais ou faltando em códigos pode gerar um erro.

Seria bom que você soubesse um pouco de Html, porque você terá que saber mexer em códigos, você precisa saber que para cores html, css, e javascript usam códigos hexadecimais, parecido com esse #cccfff e é preciso saber identificar eles no código.

No código HTML você terá que encontrar o código referente a cor de fonte dos botões reações e nele alterar o código Hexa, escolha um código de cor aqui

1. Acesse o blogger.com
2. Clique em Design
3. Clique em Editar HTML
4. Faça o backup do código do seu modelo e salve-o
5. No HTML do blogger localize esse trecho abaixo, que é referente a cor de fonte dos botões reações:
   <Variable name="body.text.color" description="Text Color" type="color" default="#FFFF33" value="#FFFF33"/>
6. Mude o código Hexa para um código de cor que você goste.
7. Clique em SALVAR MODELO

Se não existir esse código acima no HTML de seu modelo, você terá que adicionar um que irá substituir ele, ele é uma parte do Css que fica no HTML do blogger, só que tem local certo para adicionar Css, para ver onde adiciona Css no blogger, clique aqui Se não tiver aquele código acima em seu HTML, adicione esse:
/*<Variable name="body.text.color" description="Text Color" type="color" default="#FFFF33" value="#FFFF33"/>*/
Adicionado o código no local correto, é só alterar o código de cores(Hexa) e SALVAR MODELO

Atenção, para isso precisa ser código de cor hexadecimal, em Css, as vezes pode ser usado o nome da cor em inglês, mas nesse caso não.

Se outras palavras em seu blog mudarem de cor, e você não gostar, deverá deixar como era antes.

Atenção: Aqui no blog eu não uso mais a classificação, em abril de 2011 para reduzir códigos, eu tentei colocar o código acima sem a parte value="#FFFF33" e acho que isso gerou um bug do blogger, ele passou a impedir esse trecho para este blog e o fundo da classificação fica branco, para meu blog o códigos acima não funcionam mais, mas testei os códigos acima, pode ver nesse blog 'pra testes', e colocando ele certo não dá erro.

Código para mudar o fundo e colocar borda nas reações

Agora que você já aprendeu onde adiciona Css no blogger e, como identifica os códigos de cores, eu apenas vou passar o código que responsável por alterar o fundo e colocar uma borda em volta desta função do blogger(em volta de reações), é como criar um quadro na volta delas todas, não é a cada uma delas separadamente, aí, você adiciona e modifica as cores.
.reaction-buttons{border:solid 1px #ffffff; background:#cccccc; display:block;}

A borda está na seguinte cor #ffffff que é o mcódigo Hexa para branco, o fundo é background:#cccccc e o código Hexa #cccccc é para cinza claro, esses códigos de cores podem ser mudados, dependendo das cores escolhidas a opção de reações pode chamar mais a atenção, mas, tente usar cores que combinem com seu layout.

Se você não quiser borda, pode usar esse código:
.reaction-buttons{background:#cccccc; display:block;}


Entenda um pouco do Css

Observe a diferença desse código ultimo código e do outro logo acima, perceba o que eu retirei nele para não ter a borda, assim como eu retirei o código que fazia uma borda aparecer, é possível acrescentar outros códigos de estilo Css, se você buscar na web encontrará outros estilos, perceba que entre-chaves vão os estilos, por exemplo, se eu quiser que fique uma margem para deixar distante de outras coisas que tenham próximos a opção reações, bastaria adicionar algo como margin:5px; veja que cada caracter ponto-e-vírgula indica fim de um tipo de estilo. Finalizando, {dentro de chaves} estão os tipos de estilos Css e eles são separados por ponto-e-vírgula ; e um pouco antes de abre-chaves está o nome do objeto ou elemento que receberá o estilo, no caso acima é .reaction-buttons Mas nem todo estilo se aplicará a reações, isso porque, o nome .reaction-buttons é de um elemento que na verdade está na volta da função reações, e, reações do blogger é um iframe que interage com a postagem, e nem todo estilo este 'objeto'(iframe) irá aceitar, você pode imaginar isso como colocar uma moldura ou embrulhar um quadro, mas sem poder tocar na pintura da tela.

Código para mudar fundo do gadget Votar, avaliar com estrelas

Para quem adicionou aquela função de Votar ou classificar com estrelas o post do blogger, raramente acontece, mas algum modelo de template pode vir a mostrar ele em uma cor de fundo diferente de seu blog, por esse motivo, vou colocar o código que faz referencia ao fundo dessa função, não vou explicar como altera a cor porque já expliquei acima que é só mudar o código Hexa(veja a partir do passo 5, acima)

<Variable name="mainBgColor" description="Main Background Color" type="color" default="#baefef" value="#baefef">

Se não existir esse código acima no HTML de seu modelo, você pode adicionar esse abaixo, onde coloca Css no blogger.

/*<Variable name="mainBgColor" description="Main Background Color" type="color" default="#baefef" value="#baefef">*/
Depois é só alterar as cores hexa e salvar seu modelo.

• Estilos do blog, cores, tamanho, fonte, link e títulos no BlogSpot
• Background: plano de fundo grátis para blog/site
• Mudar, editar ou excluir gadget do BlogSpot
• Mudar fundo, fonte e cores do gadget do BlogSpot com Css
• Estilo das postagens do BlogSpot com Css
• Códigos para ocultar a Navbar do Blogger, Script ou Css
• Retirar contorno pontilhado de links ou personalizar eles com Css
• Mudar a aparência do gadget de inscrição do blogger
• Aparência de comentário do autor no Blogger
• Criar enquete para blog ou site