Post |Dicas blog, Pc

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

Personalizar gadget reações do visitante do blogger
botar e mudar a aparencia do gadget estrelas para votar no post do blogspotApenas 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 ou Layout(para quem usa nova interface)
  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.

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.

6 comentários:

Mudar cores de fonte e fundo de Reações e gadget de Votar com estrelas no BlogSpot2011-04-06T16:24:00-03:00
  1. Muito Obrigada!! O meu template é preto e as palavras das reações também, e o fundo da votação pos estrelas aparecem branco. Com a sua explicação conseguir mudar a cor das palavras reações e a cor de fundo da votação por estrelas n_n. E não foi muito dificil, basta inserir os códigos no lugar certo e trocar a cor como você diz.

    Responder
  2. Não consigo muda o meu esta tranparente por favor me ajuda deixe comentario em http://josepedroo.blogspot.com/
    porfavor me ajude

    Responder
  3. José Pedro

    Esse post só mostra como mudar as cores de reações e das estrelas de classificação, mas para isso elas precisam ter sido adicionadas ao blog, no texto acima existem links e alguns deles levam para a página que mostra como adiciona eles.

    Responder
  4. Este comentário foi removido pelo autor.

    Responder
  5. Olá,
    tive uma ideia acho q muito boa mas não tenho ideia de como fazer, se já existe, ou se é possivel. Mas deixo uma questão:
    queria colocar um botão de reações em cada novo comentário das postagens. como se fosse o botão curtir do face.
    Se alguem puder ajudar, vlw!

    Responder
  6. Cara obrigado vc e o cara tava doido atrás disso valeu..

    Responder

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!