Vou 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
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,
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.
6 comentários:
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.
»☾« 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;}
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
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.
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
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.
Postar um comentário