Criando um Layout part 2 - personalização básica

H

ello cutes! Tudo bem? Bom, eu fiquei um tempinho sem postar sobre o nosso big tutorial, mas já estou de volta! Hoje eu vou focar principalmente na personalização do layout, okay? Curioso? Cliquem em leia mais!

créditos: ♥ 

participe do super concurso que está rolando aqui no CT, valendo um layout + entrevista + divulgação por 1 mês! Tá esperando o que? Clique aqui e participe :) 

 
Primeiro, nós iremos colocar um background no blog, para dar um up e deixá-lo mais bonitinho! Para isso siga os passos a seguir:

vá em modelo  clique em personalizar  vá na aba plano de fundo  clique em "remover imagem"

faça o upload do background 

clique para ampliar :)

clique em aplicar ao blog e volte para o blogger

Agora, nós iremos personalizar a data dos posts, e para isso teremos que mexer no HTML do blog e nas configurações. Vamos lá?!

vá em configurações  vá na aba "idioma e formatação"  clique em formato da data  selecione logo a primeira opção 08/11/12  salve

Depois de editar a formatação da data, vamos personaliza-la e deixa-la mais bonitinha! Vá em:

modelo  editar HTML  de Ctrl F e procure por main-inner h2.date-header {

Achou? Então apague todo este código que o acompanha:

.main-inner h2.date-header {

  font: $(date.font);

  color: $(date.text.color);

}

 e substitua por este outro código abaixo:

.main-inner h2.date-header {

font: georgia; 

color: #fff; /* Cor da fonte */

margin-left: -85px; /* Espaço entre data e área do post, altere até ficar do tamanho certo */ 

background: #FF69B4; /* Cor do fundo */

float: left; /* Posicionamento, caso a sua barra lateral seja do lado esquerdo, mude para left */

font-size: 11px; /* Tamanho da fonte */

padding: 4px; 

border-radius: 10px; /* Bordas arredondadas */

}

.main-inner h2.date-header:hover {

background: #66CDAA; /* Cor do fundo quando passa o mouse */

}

agora é só você editar! Aconselho essa tabela de cores aqui, ela realmente é muito boa e apresenta uma variedade de cores :) Visualize e se der tudo certo, salve!

Agora iremos personalizar o título dos posts, okay? Bom, é super simples de se fazer, mas mesmo assim preste atenção.

1. Acesse o site Google Web Fonts e escolha uma das fontes
2. Clique em Quick-use. Veja aqui
3. Copie esse código. 
4. Acima de </head> você cola o código da fonte. 
5. No código da fonte, antes disso > você deve colocar isso / e salvar.

E pronto, sua fonte vai estar instalada no seu blog. Agora iremos colocar no titulo do post! Procure por
 h3.post-title a { 
e abaixo dele, localize font: Então, cole ao lado de font: isso:

normal 44px "NOME DA SUA FONTE";

Aonde está o numero 44px é o tamanho da fonte. Aonde está o NOME DA SUA FONTE, você deve colar o código referente a fonte escolhida. Visualize e se estiver tudo ok salve.