Elaborando Um Layout 2

Boa Noite amores!

Em primeiro Lugar ...
Venho Pedir desculpas, porque esse tutorial era pra ter saído hoje logo no inicio da tarde, porem meninas meu filho ta doente e não consegui fazer o post mais cedo tive que ficar com ele grudado em mim o tempo todo, só febre e mais febre alta =/ ....Mais, como prometido conseguir terminar o post! (antes tarde do que nunca né?)
Bom....!
Hoje vamos começar com a parte mais gostosa do Tutorial!  Que é deixar o Layout do jeitinho que queremos!(Finalmente em Aline...) Então sem mais delongas Vamos Personalizar!

Para LER a postagem inteira click em "CONTINUE LENDO"

Na Ultima aulinha vocês criaram o Blog de Teste certo?
Para Começar você vai clicar no seu blog teste e assim que abrir Clicar na opção modelo

VEJA O EXEMPLO ABAIXO:

IMAGEM DO GOOGLE

Vamos Usa a opção PERSONALIZAR e a opção EDITAR HTTML ,são esses 2 passos que vamos usar para modificar o nosso layout....

Vamos começar! Depois de estar na pagina de modelo clique em personalizar o botãozinho laranja como podem ver na imagem acima....

Dentro dessa Opção personalizar veremos as seguintes opções:

*Modelo
*Plano de Fundo
*Ajustar Largura
*Layout
*Avançado

Para LER a postagem inteira click em "CONTINUE LENDO"




Clique na opção avançado,  Plano de fundo da postagem e coloquem na cor BRANCA porque quando for mexer na opção do HTML o fundo aonde fica escrito o texto da postagem vai sumir!
Feito isso clicam la em cima em aplicar no blog.. Feito isso visualizar (clique em visualizar) e agora volte ao blogger.

Feito Isso agora vamos deixar o Blog bonitinho com o Passo numero 2!
 Vá em Editar HTML

Vamos começar as modificações.

 Primeiro vamos tirar aquelas bordinhas de papel horrorosas. Aperte Ctrl+F e procure por

 .content-outer .content-cap-top {

Logo abaixo disso, você irá apagar apenas o que está destacado em verde logo Abaixo, nada mais nada menos! Atenção para os ponto e vírgula.
.content-outer .content-cap-top {
  height: $(content.imageBorder.top.space);
  background: transparent $(content.imageBorder.top) repeat-x scroll top center;
}

.content-outer {
  margin: 0 auto;
  padding-top: $(content.margin);
}

.content-inner {
  background: $(content.background);
  background-position: left -$(content.imageBorder.top.space);
  background-color: $(content.background.color);
  padding: $(content.padding);
}

'Nota:Os únicos que você vai apagar por inteiro são só os dois " Padding:$(content.Padding);" E " Padding-top:$(content.margin); " '
Seu Layout Devera Ficar assim:
Viu já ta ficando melhorzinho não é?

Agora vamos tirar o espaço entre a área das postagens e a barra lateral.... 

Bom! Aqui no blog, a barra lateral tem uma certa distancia da área das postagens!

E se você quer que a barra lateral fique assim, separadinha como na imagem acima PULE ESSA PARTE DO TUTORIAL.
Vá na parte de Editar o Html e Aperte Ctrl+F novamente e procure por: 

" .main-inner .column-right-inner { "
Apague somente o que estiver em destaque novamente. Dessa vez você pode apagar os ponto e vírgula.

.main-inner .column-right-inner {

  margin-left: $(content.padding);

}

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

  margin-left: $(content.padding);

  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;

}

.main-inner .column-left-inner {

  margin-right: $(content.padding);

}

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {

  margin-right: $(content.padding);

  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;

}

Seu Layout Devera fica assim :

Visualize como ficou e veja que agora a sidebar está coladinha nos posts. Salve as alterações e vá para o layout do seu blog.

Bom meninas na quarta feira eu volto com mais não com a parte 3 do tutorial e sim com materiais, Fundos enfeites fontes faixinhas e etc... Pra que na SEXTA FEIRA  tenham o material pra personalizar o blog do jeito que quiserem!

Meninas não posso deixar de dar os Créditos ao maravilhoso C.B(Falecido blog de tutoriais) e G.I(acho que foi pro mesmo caminho) Que me ensinaram tudo que eu sei! *-*

Beijinhos meninas! Terça Feira e Quinta Feira é com os tutoriais maravilhosos da JANA