Postagens | Dicas blog, Imagem, Pc Windows

Mudar fundo, fonte e cores do gadget do BlogSpot

gadget widgetVou explicar como mudar estilos de um gadget ou locais na página, principalmente do BlogSpot, alterando ou adicionado Css no Html.


Já vou avisar que pode não ser fácil, é preciso ler e atenção para o que vai fazer, mas se você quer muito, e seu blog é importante pra você...

O problema é que não existe muitos textos que mostram como você mudar especificamente uma cor ou estilo de um determinado gadget ou local especifico de seu blog, algumas vezes isso nem é possível, outras você poderia ter feito no momento em que adicionou o gadget ou é possível editar ele depois de instalado, isso dependendo do tipo de gadget ou serviço que você usa para administrar seu blog/site.

Você pode, por exemplo, editar os gadget do blogger, sempre tem algumas opções de fazer isso sem o uso de códigos, mas, se o gadget é de outro site, por exemplo, uma gadget de comentário do Friend connect, esse e outros você pode tentar mudar cores e estilos no próprio site onde ele foi adquirido e o código em seu blog deve ser substituído para as modificações terem efeito.

Só isso não é suficiente? Você pode tentar usar o Css do Html de seu blog/site para fazer algumas alterações nos gadgets, mas, nem sempre vai funcionar, pois alguns gadgets não obedecem pelo fato de serem em flash, iframes ou até algum javascript com seu próprio estilo, um exemplo disso é o gadget de seguidores que, por mais que esteja bem integrado a sua página ele é um iframe(outra página dentro da sua) e essa não obedece o Css da sua, apenas a cor de fundo, isso se ele mesmo não tiver sua própria.


Você deve ter percebido que um gadget é uma espécie de quadro em sua página, e, esse quadro é uma DIV, essa tem um nome e apelido(ID e class), nada relacionado ao título, o ID é o nome e é único, e no Css do seu Html você pode dar estilos(qualidades) a essa DIV ou o que tem nela, usando o nome dela e apelido, claro que isso geralmente funciona se ela ainda não tem um estilo só para ela.

Os gadgets do próprio blogger quase sempre tem seus nomes, veja abaixo, e os gadgets inseridos com códigos ou através de outros sites ganham um nome seguido de um número, o primeiro gadget que você adicionou usando códigos chama-se HTML1 e o segundo chama-se HTML2 e assim sucessivamente, HTML3 HTML4 HTML5...


Nomes de gadgets do blogger:

Followers1 É nome(ID) da DIV ou gadget seguidores
BlogArchive1 Nome da DIV Arquivo do blogger
CustomSearch1 Caixa de Busca do google no blogspot
BlogList1 Lista de Blogs favoritos e resumo
Identificar o gadget para depois mudar

Você não sabe qual deles é o HTML2 e outros, mas tem duas formas de descobrir isso, uma é indo no Css de seu blog e adicionando uma cor de fundo diferente de suas cores só para identificar esses gadgets, depois você pode desfazer isso.

O que você fará primeiro são testes para descobrir o nome dos seus gadgets, e, a forma segura é primeiro fazer um backup de seu blog, Design => Editar HTML e após mudar o Css clicar no botão VISUALIZAR, se algo deu certo você pode fazer uma cópia desse código e guardar, caso você erre algo no próximo você tem uma cópia. Quando ficar como você gosta clique em SALVAR MODELO

O código abaixo é onde inicia o Css do seu html, fica próximo ao inicio do código. Você deve ser cauteloso, pois o código deve ser colocado exatamente antes(acima) dele e qualquer caracter que tem antes ele podem ficar umas duas linhas acima.

Você pode colocar uma cor de fundo em cada um dos gadets que não são do blogger, encontrando esse código:

]]></b:skin>

Logo antes(acima) do código ]]></b:skin> você deve deixar umas linhas em branco para não confundir e, adicionar:
#HTML1 {background:red;}
#HTML3 {background:blue;}
#HTML2 {background:green;}
#HTML5 {background:orange;}
#HTML4 {background:black;}

Os códigos acima dão uma cor de fundo diferente até o quinto gadgets que você adicionou, se você adicionou mais que 5 gadgets deve fazer isso para todos, substituindo os números. Assim que você visualizar seu blog e perceber que algum gadget ficou em uma das cores acima saberá qual é o 5, 4 e outros, se algum ficar com cor de fundo vermelha(red) saberá que o nome(ID) dele é HTML1 , nesse caso você poderá mudar outros estilos nele, adicionado ao mesmo código uma propriedade diferente, isso sempre entre-chaves{}

Se por acaso o gadget que você quer mudar é o HTML3 você poderia adicionar:
#HTML3 {background:yellow;font-size:130%;}
background:yellow; é cor de fundo amarela
font-size:130%; é o tamanho da fonte 30 porcento maior, é algo matemático, o valor você pode mudar, mas, fiz alguns testes e, no blogger só consegui aumentar a fonte dos gadgets, e não funciona sempre, depende do tipo de gadget...(Meu navegador estava configurado para não permitir que as letras ficassem menor que um valor, por isso não percebia que elas diminuíam)


Outro exemplo:
#HTML9 {background:blue; color:white; font-weight: bold;}
background:blue; é cor de fundo azul
color:white; é a cor da fonte branca
font-weight: bold; é para a fonte ficar em negrito

Deu para perceber que foi adicionado estilos entre-chaves, e no caso, esse seria para o nono gadget que um dia foi adicionado no meu blogger e teria esses estilos acima.
A cor da letra tem um código simples, é apenas color: e o nome da cor em inglês, e, no caso de cores, elas podem ser substituídas por códigos Hexadecimais como esse #000000 que é para preto, #cccccc é cinza, você pode buscar na web códigos de cores html, e até outros estilos css para você incluir eles entre-chaves.


Problemas:

Cada gadget tem um nome, mas o título dele está dentro dele, então se você por cor de fundo para o gadget, essa cor vai ficar para o título também, Mas tem como resolver isso, cada gadget é uma DIV, dentro de cada um deles e abaixo do título tem outra DIV com o apelido(class) widget-content e você pode fazer esse estilo valer só para ela da seguinte forma:
#HTML7 .widget-content {background:#ffffff; color:#000000;}
Esse código Css acima é como impor uma regra ao gadget HTML7 do seu Html, seria como que dizer assim, o quadro gadget 7 tem um quadro apelidado de widget-content que deve ter esses estilos de cor de fundo preto e cor da fonte branca.
Acima foi colocado uma regra para o estilo funcionar só para a widget-content que está dentro de HTML7, e isso não inclui o título porque ele está fora de widget-content

Mudar estilos dos gadgets do blogger

Como mostrei acima cada gadget do blogger tem seu próprio nome, usando esses nomes(ID) pode tentar mudar seu estilo, vou dar o exemplo da lista de links:
#LinkList1 .widget-content {background:#940f04 url(http://foitestado.com/imagens/elefantes-crepusculo-africa.JPG); font-family: Tahoma, Trebuchet, sans-serif; color:red;}
No código acima pouca coisa mudaria, mas é um exemplo de mudar o estilo de um dos gadgets do próprio blogger, coloquei uma imagem de fundo, tipos de fonte diferente para o gadget lista de links do blogger e cor de fonte vermelha, mas, é uma lista de links e eles já possuem suas cores no Css, então essa pode ser inútil tentar mudar. Isso é um exemplo de que algumas coisas podem ser alteradas, outras são mais difíceis.

Gadgets seguidores:
#Followers1 {background:#ffffff;}
Esse código mudaria a cor de fundo do gadget e seu título também, no exemplo mais acima(lista de links) está mostrando como muda o estilo de widget-content que está dentro de LinkList1.

20 comentários:

  1. Achei legal a matéria, mas não consegui resolver meu problema, infelizmente... acontece que o background de meu blog é bem escuro e só nas postagens ele é claro. Então, pra adicionar widgets com texto fica complicado pq a cor é a mesma da postagem.. como faço pra colocar a cor do texto de forma diferenciada?
    Ja tentei nas configurações avançadas do Designer de Modelo, mas só dá pra alterar o título do widget.. o texto continua ligado ao texto das postagens..

    o blog é blogspot.

    Grata pela atenção.

    ResponderExcluir
  2. »☾« Lana Hawk »☾«

    Da uma boa olhada em Designer de Modelo, se realmente não tem essa opção, tem tantas que é fácil se confundir, tem que ver também que na lateral muitas vezes tem links, e, para esses é outra opção, mas também no em Avançadas. Se não for isso e não tiver a opção que você quer, pode tentar mudar no Css do Html do blogger, veja como

    No caso da lateral do blogger, na maioria das vezes ela contem a classe chamada sidebar, sendo assim, você pode localizar no Css do blogger por .sidebar e logo após entre chaves estará a personalização para ela, aí, você vê onde diz color: e logo após ele modifica o código referente a cores, geralmente é um código hexadecimal parecido com isso #ccff25

    Também seria bem fácil adicionar na parte baixa do Css do Html o código que talvez fará a cor da fonte mudar na lateral:

    .sidebar, .sidebar .widget-content{
    color:#ffffff;}


    Esse código acima, colocado na parte de baixo(antes do final) do Css tentará obrigar a fonte do texto da lateral do blogspot ficar branca, o código hexa #ffffff e você pode substituir ele por um nome de cor em inglês.

    Veja que o código acima muda a cor do texto, mas, não dos links, para links já é outro, talvez, mudaria a cor deles usando o Css com algo assim:

    .sidebar a:link{
    color:#ffffff;}

    ResponderExcluir
  3. Boa tarde, adorei as dicas, tão me ajudando muito no meu blog novo...
    Mas ainda estou com uma dúvida... eu to querendo mudar a cor de fundo de apenas um gadget, e nao de todos.. como faço???
    obrigado mais uma vez...
    depois dah uma conferida no meu blog sobre filmes... www.cinefilosdeplantaobr.blogspot.com

    ResponderExcluir
  4. Felipe Rocha

    Todos os códigos acima são para o Css do Html, você precisa saber onde adiciona Css no HTML do blogger

    Depois, você precisa saber a Id do gadget que você quer alterar o fundo, uma maneira fácil de fazer isso é usando o navegador Mozilla Firefox, com ele acesse seu blog e selecione o gadget, faça isso clicando e arrastando o mouse do inicio do Título do gadget até o final do gadget e clique sobre essa seleção com o lado direito do mouse, e, no menu que aparecer clique na opção Código-fonte da seleção, aparecerá um código selecionado, nele, localize o título do gadget e acima do título terá uma Div com uma id, mais ou menos assim, <div class="widget BlogArchive" id="BlogArchive1"

    Assim você saberá a Id, no caso acima é para o gadget arquivo, aí terá que usar ela para criar uma personalização, no exemplo abaixo personalizei para um fundo azul:

    #BlogArchive1 {background:blue;}

    Aí, bastará eu adicionar essa personalização no local correto do Css do HTML do blogger

    Isso é preciso apenas se não tem essa opção de editar os gadget do blogger e mudar cores.

    Nem todos os gadgets é possível alterar as coisas, alguns estão em iframe, aí, não aceitam algumas personalizações.

    ResponderExcluir
  5. Anônimo11/8/11

    Ola,
    Eu gostaria de alterar (aumentar ou diminuir) os espaços entre as gadgets/widgets na sidebar. Tem como fazer isso? Já revirei a internet e nao há nenhuma ajuda neste sentido. grata. Katia

    ResponderExcluir
  6. Anônimo

    Vou passar um código que você pode adicionar na parte de baixo do Css do blogger, isso irá alterar a margem de baixo de todos os gadgets das laterais do blog que usa os modelos do blogger, se precisar veja onde coloca Css no blogger

    Do código abaixo, você deve alterar apenas o numero para um valor maior ou menos até conseguir o espaço desejado:

    #sidebar-right .widget, #sidebar-left .widget, .sidebar .widget{margin-bottom:55px;}


    O código acima altera o espaço na base dos gadgets, mas, para todos os gadgets das laterais, se você quer alterar para apenas um, pode copiar a parte que está entre-chaves e usar para um gadget especifico, como mostrei no post acima.

    ResponderExcluir
  7. Maravilhoso post!
    Muito bem explicado!!!
    Obrigada!

    ResponderExcluir
  8. primeiramente, vc tem um ótimo blog!
    mas eu gostaria de um código mais simples pra alterar apenas o fundo dos gadgets, do texto e da data de apenas uma cor. já consegui só o da data mudando no Headings.. agradeceria muito se vc me ajudasse.

    ResponderExcluir
  9. Aline

    Eu queria que fosse simples, mas, no blogger e até outras páginas Html existem dezenas de elementos(áreas), gadgets, e existem dezenas de efeitos ou cores que podem ser aplicados, como alguém poderia simplesmente passar um código que vai funcionar exatamente para o que todos querem?

    Tenta pesquisar na web, as vez existe o que você quer, se perguntar, tenta ser mais detalhista, pense e escreva com calma, dê cada detalhe que pode ser útil para entender que local você quer mudar.

    ResponderExcluir
  10. Não estou conseguindo, no meu caso apareceu
    }]]> e não como vc falou ]]>
    sem isso "{"
    Dai eu queria um exemplo, uma conclusão de como ficaria pronto. No meu caso eu quero so alterar a cor de fundo de 1 gadget. Obrigado!

    ResponderExcluir
  11. Igor Amorim

    Qualquer código de estilo Css, no blogger pode ser colocado exatamente antes de:
    ]]></b:skin>

    Para cores de fonte usa a propriedade color e cada caracter tem sua função, os caracteres {} abre e fecha-chaves tem a função deles.

    Dá um tempo, leia novamente com calma, tenta colocar seu modelo em um blog de testes para tentar e praticar.

    ResponderExcluir
  12. Ajudou demais! Parabéns pelo blog!

    ResponderExcluir
  13. Anônimo8/4/12

    Olá amigo, primeiramente eu queria te parabenizar pelo teu excelente blog, muito útil. Então meu problema é o seguinte, eu tenho um blog de filmes e eu estou editando ele ainda mais não consegui trocar a fonte do menu horizontal eu queria que você desse uma olhadinha la e me explicar aqui como trocar essa fonte..
    Desde já eu agradeço, OBRIGADO!!
    Meu blog ai
    http://filmestubeney.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Você pode usar Css para isso, seu menu não é original do blogger, ele tem o nome de Id chamado nav-main e no HTML de seu modelo de seu blog do blogger você pode encontrar esse trecho:

      #nav-main li a{
      font-family:Arial, Helvetica, sans-serif

      Você vai precisar substituir o nome de fonte Arial por outra que você queira, tomando o cuidado de que, se é um nome de fonte com espaço ela deve estar entre duas aspas, suponhamos que você quisesse usar Arial black, aí ficaria assim:

      #nav-main li a{
      font-family:'Arial black', Helvetica, sans-serif

      Se quisesse Lucida, ficaria assim:

      #nav-main li a{
      font-family:Lucida, Helvetica, sans-serif

      Excluir
  14. Ola !!
    Gosto muito das dicas do blog, mas tenho uma dúvida, alguém saberia me explicar como deixar um gadget dessa forma: https://lh3.googleusercontent.com/-iRBPuE3w5g0/T6SBxXeVLsI/AAAAAAAAAxQ/JAf_OCcyaIc/s496/Sem%2520t%25C3%25ADtulo.png
    Tipo uma caixa branca com uma fonte centralizada !!
    Por favor !! e obrigado !

    ResponderExcluir
    Respostas
    1. Se é apenas a caixa branca, tenta o seguinte:

      <div style='width:100%;background:#fff;color:#000;text-align:center;min-height:150px;'> Meu Texto </div>

      min-height:150px; é para uma altura mínima de 150 pixel

      Excluir
  15. Desculpa falar isso mas , eu odiei o seu tutorial. Não deu certo mesmo eu fazendo tudo nos mínimos detalhes e você fala,fala,fala e não chega na parte em que realmente se precisa.Sou blogueira a somente 1 ano e talvez você não queira ouvir meu concelho mas , recomendo que você seja mais ao ponto da coisa , tipo , está muito complicado isso aqui. Fora ao que citei acima , você escreve de uma maneira bem complexa uma linguagem boa para pessoas que estão no nível pré intermediário (se é que me entende).
    Você pode achar que eu critico de mais mas , entenda que eu sou o tipo de pessoa que gosta de expressar minha opinião com sinceridade, não gosto de iludir ninguém com mentirinhas então já de cara falei o que penso.

    By: Sarah Vivic
    Blogs: atual-sempre.blogspot.com.br
    mmfeshion.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Esse tutorial é para quem quer algo que é muito difícil de fazer, isso porque cada gadget é diferente, isso eu disse no início, e você tem a opção de começar a ler da metade, um usuário mais avançado pode começar a ler onde ver os códigos, ou num subtítulo. Eu 'falo,falo' para tentar esclarecer quais as dificuldades e outras opções, as pessoas que não sabem como Html funciona precisam saber certas coisas, por exemplo, que alguns gadgets que usam flash ou iframe não tem como alterar, se eu fosse direto aos códigos algumas pessoas não saberiam o que fazer com eles, no caso de um gadget em flash poderiam perder tempo tentando mudar a fonte dele, e iriam reclamar que não deu certo, outras pessoas nem saberiam onde adiciona Css, e iriam reclamar também.
      Sendo assim, eu prefiro que reclamem que falei muito do que ouvir reclamação de que não expliquei algo.
      Outra coisa, esse artigo é de 2009, hoje eu já sou mais direto porque optei por não postar algo meio complicado, mas esse post eu não tinha como ir direto ao ponto, isso porque não é algo simples como uma massa de bolo, que basta misturar as coisas e levar ao forno, se bem que nem isso é tão simples assim.

      Excluir
  16. Nossa que boa dica, procurei em vários lugares como mudar o fundo dos gadgets, só consegui encontra aqui!!

    valeu mesmo,

    ResponderExcluir
  17. Caro Lizandro:

    Gostei muito da sua postagem. Era exatamente o que eu procurava. (Consegui trocar a cor dos links somente do gadget de arquivos)

    Nas suas respostas dá pra ver o quanto é atencioso ( especialmente visitando o blog dos outros e respondendo perguntas básicas com educação) coisa que outros blogueiros não fazem.

    Por estes motivos, discordo da Sarah Vivic aí em cima. Pelo comentário dela a carriera de blogueira vai ser curta. Não dê ouvidos e continue seu trabalho.

    A você, obrigada por compartilhar seu conhecimento!

    Alice

    ResponderExcluir

→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!

Postagens Populares