Diferença entre Margin e Padding - Alterar Template


Para fazer alterações no template do blog precisamos saber um pouco de CSS, então aqui vão algumas dicas para ajudar você a modificar seu template, olhe o código abaixo:

.exemplo {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #000000;
text-decoration: none;
background-color: #FFFFCC;
background-image: url(URL DA IMAGEM);
text-align: left;
border: 2px solid #666666;
margin: 5px;
padding: 10px;
width: 600px;
}

Agora vamos ver o que faz cada uma das linhas deste código:

font-family: Arial, Helvetica, sans-serif; - tipo da fonte(letra)

font-size: 12pt; - tamanho da fonte

color: #0000FF; - cor da fonte

text-decoration: none; - essa linha nos permite “decorar” o texto, na verdade é sublinhar(underline) sobrelinha(overline), piscando(blink), tachado(line-through) ou nenhum(none), você só precisa trocar a palavras que está entre parênteses e ver o resultado, o blink não funciona no Internet Explorer somente no Firefox

background-color: #FFFFCC; - essa é a cor do fundo, veja aqui o Código das Cores

background-image: url(URL DA IMAGEM); - coloca uma imagem como fundo do blog/site, você só precisa hospedar a imagem em algum lugar e colocar a url

text-align: left; - alinhamento de texto esquerda(left), direita(right), centro(center), justificado(justify)

border: 2px solid #666666; - faz uma borda, existem vários tipos de borda: linha(solid), tracejado(dashed), pontilhado(dotted) esse são os principais estilos de borda, mas existem outros, o valor 2px é a espessura e #666666 é a cor que podem ser alterados conforme seu gosto.

margin: 5px; - essa linha faz uma margem externa ou seja deixa um espaço vazio do lado de fora(veja imagem)

padding: 10px; espaço vazio dentro(veja imagem)

width: 600px; - largura da coluna, também pode ser usado em %

Então para alterar o modelo do blog você deve procurar esses códigos nele, mas quando digo procurar não quero dizer que você deverá ler o código todo, mas use o ctrl+F, isso funciona no Internet Explorer, Firefox, Opera, nos demais navegadores não testei, então para achar alguma coisa use as teclas de atalho ctrl+F e digite o que você quer encontrar.

Um exemplo que como mudar algo no seu layout, caso você queira mudar a cor do fundo o que controla isso é background. Para mudar o fundo das postagens procure .main{.....} que é a parte principal do blog e coloque o código background-color: #FFFFCC; e para mudar o fundo do menu coloque o mesmo código junto com .sidebar{..............}.

Este exemplo serve para qualquer coisa que você queria mudar no seu template, por exemplo, cor, o tipo e tamanho da letra, margens, etc... Mas isso não significa que o código deve conter todas essas linhas, pois não quiser usar uma borda basta apagar a linha border: 2px solid #666666; isso também vale para as outras partes do código. Veja aqui mais detalhes sobre Colocar ou alterar as bordas

Esta explicação é para você ter algumas noções de CSS e saber modificar seu template, mas se quiserem ver mais detalhes e outras coisas que podemos fazer com o CSS, visite o site http://www.maujor.com , eles têm ótimos tutoriais sobre o assunto.

17 comentários:

  1. Olá gostei muito do seu blog aqui encontrei várias respostas a muitas das minhas dúvidas.Aproveitando tenho um blog já algum tempo e nele existe um contador de visitas, tenho tentado encontrar um meio de transforma-lo em invisivel será que você poderia me ajudar nisso, ficarei muito grata.
    Mic

    ResponderExcluir
  2. um contador que é invisivel é o http://www.google.com/analytics/index.html vc pode cadastrar com a mesma conta google que usa no blog

    ResponderExcluir
  3. Oi estive ausente por um tempo agora que vi a sua resposta para o contador invisível grata por sua resposta... Nessa semana vou entrar no site e fazer meu cadastro, caso tenha alguma dúvida poderei contar com sua ajuda? Tchau.

    ResponderExcluir
  4. Boa tarde, eu gostaria de saber como editar apenas 1 widget, pois eu tenho uma no "header" do meu blog com imagens aleatórias, mais eu quero remover o "padding" dela e não conssigo..

    como eu faço?

    ResponderExcluir
  5. veja aqui como Personalizar gadgets do Blog, lá mostra como editar um gadget separadamente dos outros

    ResponderExcluir
  6. Fabiano, eu segui os passos mas as margens do meu blog não diminuem. O layout que escolhi tem apenas uma barra lateral direita, mas quem vê parece que é um de uma barra lateral de cada lado.
    Será que a culpa é do modelo?
    Olha só meu blog:http://www.lilacpersiancats.com

    Eu quero margens bem fininhas .
    Além disso eu queria que a foto do título ocupasse toda a lateral.
    Me ajuda, please.

    ResponderExcluir
  7. Gatil Carioca - Gatos Persa e Himalaia
    imagens que ocupam o espaço todo não é possivel fazer pois cada pessoa tem um monitor de um tamanho, ou seja o que ficará bom para você pode não ficar pra mim.

    ResponderExcluir
  8. Oi Fabiano, mas o meu texto está muito centralizado. Eu queria diminuir as margens direita e esquerda, que estão tomando muito espaço. Dá impressão que a página está formatada para mais uma coluna de cada lado. Tem como eu conseguir diminuir as margens?
    Obrigada pela atenção

    ResponderExcluir
  9. Gatil Carioca - Gatos Persa e Himalaia
    tem como diminuir as margens, só tem que achar o lugar certo no seu template

    mas se for questão de alinhamento é com o código text-align:left;

    no seu template deve ter text-align:center na parte das postagens

    ResponderExcluir
  10. Fabiano, socorro. Consegui diminuir a margem da esquerda, mas fiz alguma coisa que passou a coluna da direita para baixo das postagens. Em design também está assim
    Como faço para passar a coluna da direita para seu lugar?
    Desculpa o incômodo, mas sou novata

    ResponderExcluir
  11. veja se não apagou o float:.... do código de uma das colunas

    o certo é float:left ou float:right

    dependendo do lado que você queira

    ResponderExcluir
  12. Como faço pra diminuir asdistancia entre as colunas do blog nesses novos formatos de blog da BLOGGER, que é mais complicado o HTMAL.

    veja meu blog, www.rapdemensagem.blogspot.com

    ResponderExcluir
  13. no começo do seu html tem
    ÉrriJota

    Variable name="main.section.margin" description="Main Section Margin" type="length" default="15px"/

    altere esse valor 15 para 0 e veja se melhora...

    esses novos templates tem muitos detalhes e são complicados de mexer

    ResponderExcluir
  14. Opa , bom dia! Sempre acompanho seu site, me ajudou mto em meu blog, parabéns! Hj estou com dificuldade para diminuir o padding da area de widgets.. o espaço tá grande.. e no meu blog não está desse modo explicado aqui.. nao consegui encontrar.. Me dá uma luz? Quero deixar igual ao seu.. com as informações bem proximas a margem. Abraço! Desde já lhe agradeço.

    ResponderExcluir
  15. Upgrade Films
    tente procurar por padding ou margin nos estilo .widget no seu html... mas isso varia conforme o template

    ResponderExcluir
  16. Olá Fabiano, meu problema de 17 de Maio de 2011 permanece. Nunca mais consegui colocar as colunas laterais. Me ajuda, please!!
    Obrigada

    ResponderExcluir
  17. Gatos Persa acho que é melhor trocar o template porque corrigir erros as vezes é muito complicado

    ResponderExcluir