Como fazer um template/layout

Para todo template:

1) Pegar o template mínima-esquerda ou mínima-direita

2) remover/ trocar o background

Se quiser que o background seja apenas uma cor, altere o #fffff na variável pelo código da cor desejada

Para adicionar uma imagem como background do template, procure pelo seguinte código:

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

Em background apague a variável $bgcolor e cole o código abaixo no lugar dela:

background: url(link_da_imagem)repeat fixed;

 Procure pelos trechos a seguir:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }
#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }
#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

O que vamos fazer é adicionar uma cor de fundo nessas áreas.

OBERSEVAÇÃO
• Se adicionarmos uma cor de fundo no #outer-wrapper ela ficará em todo o template, pois essa área abriga as demais. (veja um exemplo)
• Se adicionarmos uma cor de fundo no #main-wrapper e na #sidebar-wrapper as demais áreas (header, footer e outter-wrapper) não terão cor, e sim a imagem do background. (veja um exemplo)

Vamos adicionar background: #fff; (a cor de fundo) antes do fechamento de chaves apenas nas áreas desejadas. No meu caso, irei adicionar a cor apenas na sidebar e na área dos posts, mas isso fica à sua escolha. Adicionando a cor, o código ficará assim:

#main-wrapper {
  width: 410px;
  float: $startSide;
  background: #fff;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  background: #fff;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Após isso, visualize o modelo. Se você tiver adicionado a cor apenas nessas duas áreas como eu fiz, provavelmente, você irá perceber que o texto das postagens e da sidebar estão próximos demais das margens, como nessa imagem. Para corrigir isso vamos dar um espaço entre a borda das áreas e os textos .Adicione padding:10px; no código referente às postagens e padding:7px; no código referente à sidebar. Os códigos ficarão assim:

#main-wrapper {
  width: 410px;
  float: $startSide;
  background: #fff;
  padding:10px;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  background: #fff;
  padding:10px;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Visualize e veja que agora há um pequeno espaço entre as bordas e os textos. \o/ Após essa alteração, a sidebar do seu blog poderá se desalinhar (ficando abaixo da altura dos posts), mas não precisa se preocupar em relação a isso.

3) Arrumar as larguras

Por padrão o Minima apresenta uma largura total de 660px, sendo 410px para o #main-wrapper e 220px para a sidebar. Veja:

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
  }

#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
  }

Agora que já identificamos cada parte do template vamos alterar as medidas. Fácil!
O que você basicamente precisa fazer é alterar o valor 660px (no header-wrapper, outter e footer) por um outro valor de sua preferência, alterando a largura principal você deverá modificar a largura do #main-wrapper e da sidebar de modo que a soma desse dois valores seja menor ou igual que a largura total do template, assim o lay ficará alinhadinho.

4) Personalizar o cabeçalho

Primeiro você deve fazer um banner para o seu blog e utilizar nele as mesmas medidas que o seu template possui. Depois procure pelo trecho seguinte no seu html:

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

Acrescente height: alturapx; após a segunda linha do código e depois, background: url(link_da_imagem)no-repeat top left;. Apague border:1px solid $bordercolor; e deixe a margin em 0 auto. Assim:

#header-wrapper {
  width:660px;
  height: alturapx;
  background: url(link_da_imagem)no-repeat top left;
  margin:0 auto;
  }

Explicando:

width: é a largura do cabeçalho, substitua 660px pela largura total do seu banner
height: é a altura. Substítua alturapx pela altura do seu banner (avá).
margin 0 auto: deixa o cabeçalho centralizado.
background: é onde você vai colocar o link do seu banner. Hospede-o em um site e copie o 'direct link' dele.
no-repeat top left: vai deixar seu banner sem repetição e alinhado.

Agora procure por:

#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
  }

Apague a linha da borda e deixe a margem em 0, assim:

#header {
  margin: 0px;
  text-align: center;
  color:$pagetitlecolor;
  }

Mas o título e descrição do blog estão por cima do banner! E agora? É só colocar display:none; nos seguintes trechos:

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
  display:none;
  }

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
  display:none;
  }

Visualize o modelo.

5)Personalizando os títulos da sidebar e as cores dos links

Abra o editor do seu template e procure por:

a:link {
  color:$linkcolor; /*-- coloque o código de uma cor no lugar de $linkcolor para o link --*/
  text-decoration:none;
  }
a:visited {
  color:$visitedlinkcolor;  /*-- coloque o código de uma cor no lugar de $visitedlinkcolor para o link visitado --*/
  text-decoration:none;
  }
a:hover {
  color:$titlecolor; /*-- coloque o código de uma cor no lugar de $titlecolor para o link apontado --*/
  text-decoration:underline;
  }

Coloque o código hexadecimal das cores nos lugares em negrito (veja essa tabela de cores) e está feito.
Agora vamos dar estilo aos títulos da sidebar. Procure no seu html o seguinte trecho:

/* Headings
----------------------------------------------- */

Copie o código a seguir e cole-o ABAIXO do trecho procurado:

.sidebar h2 {
margin:0em 0 .75em;
font:$headerfont; /*-- tipo da fonte --*/
line-height: 1.9em; /*--altura da linha--*/
text-transform: uppercase; /*-- transformação do texto, todas letras em maiúsculo --*/
font-weight:bold; /*-- peso da fonte, todas as letras em negrito --*/
letter-spacing:.1em; /*-- espaço entre as letras do título --*/
color: #ABC5D0; /*-- cor do título --*/
background: #eee; /*-- cor do background do título --*/
font-size: 12px; /*-- tamanho da fonte --*/
text-align: center; /*-- alinhamento do título, ao centro --*/
}

Altere o código de acordo com a explicação. Modifique as cores, o tamanho da fonte, o tipo de fonte, o espaçamento entre as letras etc.

Lembrando que em:
text-transform: você pode deixar todas as letras em minúsculo (lowercase), maiúsculo (uppercase), apenas a primeira letra em maiúsculo (capitalize) ou normal (normal).
font-weight: define se o título ficará em negrito. Você pode deixá-lo em itálico (font-style: italic).
text-align: define a posição, o alinhamento do título. Na esquerda (left), no centro (center) ou na direita (right).

6) Título e rodapé das postagens

Bom, para alterarmos o estilo dos títulos vamos procurar por:

.post h3 {
  margin:.25em 0 0; /*-- margem --*/
  padding:0 0 4px; /*-- espaço entre o título e o texto da postagem --*/
  font-size:140%; /*-- tamanho da fonte --*/
  font-weight:normal; /*-- peso da fonte, normal --*/
  line-height:1.4em; /*-- altura da linha --*/
  color:$titlecolor; /*-- cor da fonte --*/
  }

Modifique como quiser.

Exemplo:

.post h3 {
  margin:.25em 0 8px; /*-- margem --*/
  padding:0 0 1px; /*-- espaço entre título e borda --*/
  font-family: Trebuchet MS; /*-- tipo da fonte --*/
  font-size:20px; /*-- tamanho da fonte --*/
  font-style: italic; /*-- estilo da fonte, em itálico --*/
  line-height:1.2em; /*-- altura da linha --*/
  color: #ABC5D0; /*-- cor do título --*/
  text-align:center; /*-- alinhamento do título --*/
  border-bottom: 1px dashed #dcdcdc; /*-- borda embaixo do título --*/
  }

Agora vamos alterar a cor do título em estado hover (quando o mouse passa sobre ele).
Logo abaixo do código que procuramos acima, encontraremos esses dois códigos:

.post h3 a, .post h3 a:visited, .post h3 strong {
  display:block;
  text-decoration:none;
  color:$titlecolor; /*-- cor do título normal --*/
  font-weight:normal; /*-- peso da fonte, normal --*/
  }
.post h3 strong, .post h3 a:hover {
  color:$textcolor; /*-- cor do título em estado hover, por padrão ele terá a cor a cor do texto da postagem --*/
 }

O que você vai fazer é alterar as partes em negrito. Em color:$titlecolor coloque a cor do título da postagem, em color:$textcolor coloque a cor que o título terá quando o mouse passar sobre ele. Veja:

.post h3 a, .post h3 a:visited, .post h3 strong {
  display:block;
  text-decoration:none;
  color:#ABC5D0;
  font-weight:normal;
  }
.post h3 strong, .post h3 a:hover {
  color:#FF82AB;
  }

Eu determinei que o título será azul e quando estiver em estado hover ficará cor-de-rosa.
Bom, fim da primeira parte. Agora vamos para o rodapé das postagens. Role um pouco mais a página do editor e encontre essa parte:

.post-footer {
  margin: .75em 0;
  color:$sidebarcolor; /*-- cor da letra --*/
  text-transform:uppercase; /*-- transformação do texto, todas as letras em maiúsculo --*/
  letter-spacing:.1em; /*-- espaço entre uma letra e outra --*/
  font: $postfooterfont; /*-- tipo de fonte --*/
  line-height: 1.4em; /*-- altura da linha --*/
  }

Ela é a responsável pelo footer (rodapé) dos posts. Por padrão do modelo Minima é tudo bem simples, sem estilo nenhum.
Altere da forma que quiser, do mesmo modo que fez com o título. Por exemplo:

.post-footer {
  margin: .75em 0; /*-- margem entre a postagem e o rodapé --*/
  background: url(http://i39.tinypic.com/358uiva.png)repeat; /*-- imagem ou cor do background --*/
  padding: 3px; /*-- espaço entre as bordas e o texto do rodapé --*/
  color:#666; /*-- cor do texto --*/
  text-transform:normal; /*-- transformação do texto --*/
  letter-spacing:.0em; /*-- espaço entre as letras --*/
  font-family: trebuchet ms; /*-- tipo da fonte --*/
  font-size: 10pt; /*-- tamanho da fonte, pode ser em px, % ou pt --*/
  font-style: italic; /*-- estilo da fonte, em itálico --*/
  line-height: 1.7em; /*-- altura da linha --*/
  }

Esse é um exemplo, é o modo como deixei o rodapé das minhas postagens. Você pode adicionar bordas, imagens como bg ou uma cor, tanto faz. Fica a seu critério.

7) Modificar o texto e alinhar

Abra o seu editor e procure por 'Variable definitions'. A segunda variável do modelo Minima é a da cor do texto, a 9ª é a variável da cor do texto da sidebar e a 11ª variável é a responsável pelo tipo de fonte que será usada no template.

O que devemos fazer é alterar as partes sublinhadas. Em #333333 coloque outra cor para a cor do texto da página (ex: #66666, #000000), em #666666 coloque outra cor para o texto da sidebar (ex: #B39B75, #999999). No meu caso eu escolhi uma cor igual (#666666) para o texto da página e da sidebar.
No lugar de 100% Georgia coloque o tamanho e o nome da fonte que será usada no texto (ex: 100% Verdana, 12px Trebuchet MS, 10pt Tahoma). 100% equivale a 12px e assim por diante.
Agora vamos alinhar o texto na sidebar e na área de postagem. Procure por:

#main-wrapper {
  width: 410px;
  float: $startSide;
  text-align: justify; /*-- texto alinhado, justificado --*/
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }
#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  text-align: justify; /*-- texto alinhado, justificado --*/
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
  }

E adicione as partes destacadas em negrito, assim o texto ficará alinhadinho. Muito simples, não tem erro!
Se quiser retirar a navbar do lay, basta adicionar #navbar-iframe { display: none; }ANTES de ]]></b:skin>. Fácil!

8) banner sobre a sidebar (opcional)

Primeiro faça o banner que você quer utilizar sobre a sidebar. Como aconselhei no tutorial para o modelo Viagem, crie um banner em formato "quadrado" (com largura e altura iguais) e dê para ele a mesma largura que a sidebar do seu blog tem.
Hospede o banner aqui e guarde o link da imagem hospedada com você. Depois disso, vá em design → editar html, dê Ctrl+F e procure por um dos trechos a seguir:

• Sidebar à direita

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  margin-top: 200px;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

• Sidebar à esquerda

#sidebar-wrapper {
  width: 220px;
  float: $startSide;
  margin-top: 200px;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

Adicione a parte destacada em negrito no trecho referente à posição da sua sidebar. Altere o valor 200px por um valor que vá de acordo com o banner que você deseja colocar sobre ela. Se você aumentar esse valor, o espaço será maior, se você diminuir, o espaço será menor. Vá testando valores (100, 150, 200, 250px). Visualize o modelo e veja que agora há um espaço sobre a barra lateral.
Dê Ctrl+F novamente e procure pelo código abaixo (ele é único tanto para a sidebar na direita quanto na esquerda):

<div id='sidebar-wrapper'>

Após encontrar esse trecho, copie o código abaixo e cole DEPOIS do trecho encontrado:

<center><a href='/'><img src='LINK-DO-BANNER' style='margin-top: 0px; margin-bottom: 5px;'/></a></center>

Cole o link do banner que você hospedou lá no começo do tuto no local indicado (LINK-DO-BANNER). Se precisar, altere o valor 0px em margin-top e 5px em margin-bottom por outros — dependendo da altura do seu banner.
Visualize o modelo e veja se o banner está bem posicionado. Se ele estiver muito próximo à sidebar, AUMENTE o valor dos px em margin-bottom, se ele estiver lá no topo do template, DIMÍNUA o valor dos px em margin-top. Entedeu?

9) Ajustar alturas do post e sidebar

No painel do blog, vá em design → editar html e procure pelos trechos a seguir:

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Explicando:
#main-wrapper é a área de postagens, comentários e links de navegação (postagens antigas, recentes e início).
#sidebar-wrapper é a barra lateral. Isso vocês já sabem.

Para alterar a altura dessas áreas vamos adicionar nesses trechos a propriedademargin-top. Por exemplo:

#main-wrapper {
  width: 410px;
  float: $startSide;
  margin-top:300px;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Como pode ver eu adicionei margin-top apenas na área de postagens. Sendo assim, os posts terão uma altura mais baixa que a sidebar. O valor de 300px que eu coloquei emmargin-top é alterável, você pode colocar o valor que quiser. Se colocar um VALOR MAIORos posts irão DESCER, se colocar um VALOR MENOR, os posts irão SUBIR. Simples.
Diferente do modo como fiz, o margin-top também pode ser adicionado apenas na sidebar, sendo assim os posts permanecerão em sua altura padrão e a sidebar vai descer. (avá)

10) Personalizar as imagens

Há uma borda que contorna toda a imagem e a legenda. Isso é o padrão, mas se quiser modificar dá para fazer algumas alterações bacanas. No painel do Blogger, vá em design → editar html e procure isso (use a ferramenta de busca Ctrl+F):

.post img, table.tr-caption-container {
  padding:4px; /* espaço entre legenda e imagem */
  border:1px solid $bordercolor; /* borda que contorna a imagem e legenda */
}
.tr-caption-container img {
  border: none;
  padding: 0;
}

 Esses são os códigos responsáveis pelas imagens e legendas do modelo Minima. Como eu disse, dá para fazer grandes alterações. Subistítua os dois códigos acima, por esse código:

.post img {
  padding:4px; /* espaço entre borda e imagem */
  border:1px solid #CORdaBORDA; /* espessura, tipo e cor da borda */
  background:#CORdeFUNDO; /* cor de fundo da imagem */
}

Faça as alterações necessárias e personalize o código como quiser. Explicando:

• Em padding você pode aumentar ou diminuir o valor 4px, isso depende da largura que você quer que haja entre a borda e a imagem (essa também será a largura que o background da imagem terá).
• Em border você pode alterar a espessura da borda, o tipo dela (dashed, dotted, double, groove, inset, outset ou ridge) e a cor. Ou se preferir, você pode simplesmente excluí-la do código (apague o código da borda, ou substitua ele por border:none;).
• Em background você pode colocar a cor que quiser (vide tabela de cores) ou até mesmo um background/pattern como fundo. Para isso, substitua #CORdeFUNDO porurl (LINKdaIMAGEM) repeat.

11) Personalizar rodapé

Procure:

.post-footer {
  margin: .75em 0;
  color:$sidebarcolor;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  line-height: 1.4em;
}

e substitua por:

.post-footer {margin-top: 15px; /* espaço entre o rodapé e o post */padding: 0; }
.post-footer-line-1, .post-footer-line-2 {border-bottom: 1px solid #EEEEEE; /* cor, espessura e tipo da borda */background: transparent; /* fundo do rodapé */color: #666666; /* cor do texto */font-family: Arial; /* fonte do texto */font-size: 11px; /* tamanho da fonte */margin: 2px 0; /* margem entre uma linha e outra, não altere */padding: 1px 1px; /* espaço entre texto e margens, não altere */text-transform: uppercase; /* transformação do texto */word-spacing: .2em; /* espaço entre palavras */text-align: center; /* alinhamento do texto */ }

Altere o código de acordo com a identificação de cada linha e com o auxílio da explicação a seguir:

border-bottom: é a borda abaixo de cada linha do rodapé. Substitua solid (borda sólida) por dashed (borda tracejada), double (borda dupla) ou dotted (borda pontilhada).
background: é a o fundo do rodapé, mais precisamente de cada linha. Substituatransparent pelo código hexadecimal da cor que quiser ou uma imagem. (#FFFFFF, url (lik-da-imagem) repeat)
color: é a cor do texto, substitua #666666 pelo código hexadecimal da cor que quiser (vide tabela de cores aqui).
font-family: é a fonte do texto, substitua Arial pelo nome da fonte que quiser (Verdana, Georgia, Tahoma etc).
font-size: é o tamanho da fonte, substitua 11px pelo tamanho que quiser (10pt, 10px, 12px etc)
text-transform: é a transformação do texto. Substitua uppercase (todas as letras em maiúscula) por lowercase (letras em minúscula), none (letras com formatação padrão) ou capitalize (primeira letra de cada palavra em maiúsucula e demais letras em minúscula).
text-align: é o alinhamento do texto. Substitua center (centro) por left (esquerda) ouright (direita).
word-spacing: é o espaçamento entre cada palavra. Substitua .2em por .1em ou .3em, nada mais que isso.

12) Faixinha na sidebar

Antes de inserir as faixinhas no seu template, abra o editor HTML do seu blog e procure pelo seguinte trecho:

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Após encontralá-lo, substitua hidden (que está destacado no código) por visible. Isso é muito importante, se essa alteração não for feita as faixinhas ficarão cortadas comonesse exemplo. Depois de fazer essa pequena mudança, vamos inserir as faixinhas.

MODO GERAL: Uma única faixinha para todos os gadgets, títulos inseridos e  personalizados com CSS. 

Procure no código do seu template o seguinte trecho:

 /* Headings
----------------------------------------------- */

Abaixo disso, cole o seguinte: 

.sidebar h2 {
  background:url(link-da-faixa)no-repeat;
  width:195px;
  height:57px;
  margin-left:35px;
  margin-top:-5px;
  margin-bottom:0;
  font-family:Tahoma;
  font-size:13px;
  color:#FFFFFF;
  text-shadow:1px 1px 0 #A4B2B3;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:0;
  line-height:45px;
  }

Altere o código como quiser, use a explicação seguinte para isso:

background: é o fundo dos títulos, no caso, o fundo será a faixinha. Coloque o link da faixa no local indicado e não altere o no-repeat.
width: é a largura, coloque a largura certa da faixa para não ficar desconfigurado.
height: é a altura, a regra é a mesma da largura.
margin-top: é o espaço entre a faixa e  topo da sidebar. Valor negativo = diminue o espaço, valor positivo = aumenta o espaço.
margin-left: é o espaço à esquerda da faixa, deve ser alterado se necessário. Se quiser a faixa mais para a esquerda, diminua o valor; para posicioná-la mais a direita, aumente.
margin-bottom: é a margem abaixo, altere se necessário.
color: cor do título, altere o #FFFFFF (branco) pela cor que quiser.
text-shadow: é a sombra do texto, se não quiser usá-la apague o código.
text-align: é o posicionamento do título, no caso, o título posiciona-se à esquerda (left), mas pode ser ao centro (center) ou à direita (right).
font-family: o tipo da fonte usada para os títulos, use a fonte que preferir.
font-size: é o tamanho da fonte, altere se necessário.
letter-spacing: é o espaço entre as letras do título, sugiro que use no máximo .1em.
line-height: é o que fará com que o título fique sobre a faixa. Aumente o valor para que o título "desça", se quiser que o título "suba" diminua o valor.
text-transform: é a transformação do texto; em maiúsculas (uppercase), em minúsculas (lowercase). 

Após fazer a personalização do código, visualize o modelo e salve-o. Agora vamos ao modo individual, é um pouco mais complicado que o geral, mas basta ter atenção.

MODO INDIVIDUAL: Faixinhas diferentes (ou iguais) para cada gadget, os títulos são inseridos com a ajuda de um editor, sem a necessidade do CSS. 

Procure no código do seu template o seguinte trecho:

      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>

Abaixo disso você encontrará um código semelhante a esse:

As partes destacadas em laranja são os IDs de cada gadget, como usaremos uma faixa diferente para cada gadget precisamos dos IDs. Copie os IDs dos seus gadgets e guarde-os com você. Agora procure por:

/* Headings
----------------------------------------------- */

Abaixo disso cole o seguinte código:

#IDdoGadget h2 {
  background:url(link-da-faixa)no-repeat; /* substitua pelo link das suas faixas */
  width:192px; /* largura das faixa */
  height:52px; /* altura das faixa */
  margin-top:-5px; /* margem acima da faixa */
  margin-bottom:0; /* margem abaixo da faixa */
  margin-left:39px; /* margem à esquerda */
  color:transparent; /* título transparente, não mexa */
  }

O processo é o mesmo do modelo Viagem. Substitua o trecho IDdoGadget pelos IDs dos seus gadgets — aqueles que pedi para que você os copiasse e guardasse consigo. Para personalizar o código, use a explicação que eu dei anteriormente (para o modo geral). Não mexa no transparent em color, ele fará com que o título dos gadgets fique transparente.

Repita o código para cada gadget, alternando as faixinhas. Depois de fazer as alterações, o meu CSS ficou da seguinte forma:

O código será o mesmo para todos os gadgets, as únicas alterações a serem feitas são os IDs dos gadgets e o link das faixinhas. Depois de fazer as alterações, basta visualizar o modelo e salvá-lo. Está feito!

13) Seleção colorida

A primeira coisa a ser feita é ir no editor html do seu blog e procurar pela tag abaixo:

]]></b:skin>

Após encontrá-la, copie o código abaixo e cole-o ANTES da tag procurada anteriormente:

/*--- Selecao Colorida ---*/
::-moz-selection {
background:#EEEEEE; /*Cor do fundo*/
color:#333333; /*Cor da fonte*/
}
::selection {
background:#EEEEEE;/*Cor do fundo*/
color:#333333; /*Cor da fonte*/
}

Substítua as partes destacadas em negrito pelo código hexadecimal das cores que você deseja, lembre-se de colocar cores iguais (do mesmo modo que está no código). Salve as alterações.

14)Linha pontilhada no título

procure por:

.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
  border-bottom: 3px dotted #CCCCCC;
}

 15) Excluir mostrando postagens com o marcador

procure por:

]]></b:skin>

ACIMA dessa tag, cole o código seguinte:

.status-msg-wrap, .status-msg-body, .status-msg-border, .status-msg-bg, .status-msg-hidden {
display: none;
}

Visualize o modelo para certificar-se de que o seu template está normal, salve as alterações e confira o resultado clicando em qualquer marcador do seu blog.


16)Menu de páginas personalizado

O primeiro passo é ir em design → adicionar um gadget → páginas. Lembrando que o gadget deve ficar na parte correspondente à sidebar do blog, se você adicioná-lo acima das postagens ou abaixo do cabeçalho, não vai funcionar.
Após isso, vá em editar html e procure pela tag seguinte:

]]></b:skin>

Copie o código abaixo e cole-o ANTES de ]]></b:skin>.

    #PageList1 ul {
    list-style: none; /* exclui a bolinha padrão da frente da lista */
    padding: 0;
    margin: 0;
    }

    #PageList1 a {
    font-weight: normal;
    color: #FCCBD7; /* altere a cor do link aqui */
    text-decoration: none; /* tira o traço abaixo do link */
    font-family: verdana; /* altere a fonte do link aqui */
    font-size: 12px; /* aqui o tamanho da fonte aqui */
    display: block; /* link ativo na largura da lista */
    }

    #PageList1 li {
    background: url (http://static.tumblr.com/tffhbtv/DZFm2w0po/menuu1.png) no-repeat left; /* altere o mini gif aqui */
    padding: 1px 1px 1px 12px;
    margin: 0;
    text-indent: 0; /* afasta o link para não ficar por cima do mini gif */
    border-bottom: 1px dashed #EEEEEE; /* cor e tipo de borda dos links */
    }

    #PageList1 li:hover {
    background: #FEF4F6 url (http://static.tumblr.com/tffhbtv/Z3Um2w0qb/menu2.png) no-repeat left; /* altere a cor do background e o mini gif aqui */
    padding: 1px 1px 1px 12px;
    margin: 0;
    text-indent: 0; /* afasta o link pra não ficar por cima do mini gif */
    border-bottom: 1px dashed #EEEEEE; /* cor e tipo de borda dos links */
    }

Altere o código de acordo com a identificação das linhas. Você pode alterar o mini gif (encontre-os aqui), a cor e o tipo de borda, o background do link em estado hover, enfim. Fica a seu critério.

17)Blockquote

procure por ]]></b:skin> e acima cole:

blockquote {
color: #000;
background: #CCC;
padding: 5px; }
blockquote a, blockquote b, blockquote i { color: #000 !important; }

 18) Barrinha de rolagem
procure por ]]></b:skin>, achou? Agora antes desse codigo cole esse aqui

/*** rolagem da vertical da página ***/
::-webkit-scrollbar-thumb:vertical {
background: #d80247; /*cor da barrinha que se move*/
border: 1px solid #ffffff; /*coloque borda se quiser*/
height:50px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
/*** rolagem da horizontal da página***/
::-webkit-scrollbar-thumb:horizontal {
background-color:#ff0052; /*cor da barrinha que se move*/
border: 1px solid #ffffff; /*coloque borda se quiser*/
height:10px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
 }
/*** parte fixa da rolagem (fundo que não se move) ***/
::-webkit-scrollbar {
height:10px;
width:15px; /*largura da barra de rolagem*/
 background: #000000; /*cor da parte fixa, que fica no mundo*/
border: 1px solid #; /*coloque borda se quiser*/
}

19) Paginação

Substituindo o link "Início"

 Aperte Ctrl+F e procure por: <data:homeMsg/> Esse código vai aparecer em dois lugares, mas você só vai mexer no primeiro que aparecer.

 Substitua esse código pelo código abaixo:

<img src="url_da_imagem"/>

Substituindo o link "Postagens mais antigas"

 Aperte Ctrl+F e procure por: <data:olderPageTitle/>

 Substitua esse código pelo código abaixo:

<img src="url_da_imagem"/>

Substituindo o link "Postagens mais recentes"

 Aperte Ctrl+F e procure por: <data:newerPageTitle/>

 Substitua esse código pelo código abaixo:

<img src="url_da_imagem"/>

20) comentários do face

http://www.faladantas.com/2014/07/como-colocar-os-comentarios-via.html