HowTo: Separar gadgets em "caixas"

Boa tarde (hehe), migos. Fiz uma leve mudança no layout do blog, e esta foi separar os gadgets. Antes nem dava para perceber pois o fundo dos mesmos era branco, assim como o fundo do blog, então não fazia diferença; por isso resolvi colocar uma cor neles e separá-los (pois sempre preferi gadgets separados). Vocês podem achar esse tutorial em vários blogs pois é um tutorial super comum, mas eu descobri como fazer sozinha antes de procurar qualquer tuto. Enfim, vamos ao que interessa!


Como assim, gadgets em "caixas"?
É esse estilo aqui do blog. Se não entenderem, aqui está outro exemplo.
Live preview
Ok, vamos lá. Primeiramente, vá em Modelo > Personalizar. Clique em Avançado > Plano de fundo da barra lateral; selecione transparente. Salve e clique em voltar ao Blogger.
Feito isso, ainda na página Modelo, clique, desta vez, em Editar HTML. Clique nesta seta:
Aperte Ctrl + F e pesquise por:
.sidebar .widget {
 Abaixo dele, cole:
background: #d6ecd4;
 E pronto! É só substituir o que está em vermelho pelo código da cor que quiser, escolha uma cor aqui. Se quiser colocar bordas arredondadas (como aqui no blog), é só colar também:
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
Atenção: O código acima é apenas para as bordas inferiores. Se quiser bordas arredondadas na parte superior do gadget, cole também esse outro código:
border-top-left-radius: 5px;
border-top-right-radius: 5px;
Altere o trecho em azul de acordo com sua preferência; é a "intensidade" do arredondamento. Quanto maior, mais arredondada a borda ficará.
Bem, é isso! Bem simples, né? De vez em quando trarei um tutorial diferente na nova categoria HowTo. Beijinhos!

Nenhum comentário:

Postar um comentário

Responderei a todos os comentários.
Comentários contendo xingamentos ou qualquer tipo de ofensa serão excluídos.
Não esqueça de deixar o link de seu blog para que eu possa retribuir a visita.
Obrigada por comentar!