Mudar fundo, fonte e cores do gadget do BlogSpot

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 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.

• Adicionar gadget seguidores no blogger
• Colocar imagem-link no BlogSpot
• Imagem e cor de fundo do blogger
• Mudar cores e fundo do título do post do BlogSpot
• Mudar tamanho e cor do título dos gadget do BlogSpot
• Colocar div acima da postagem blogger