Criando um Layout básico #1

Heey' umas amegas diwas pediram um tutorial ensinando a fazer um layout c: Bem, é muita coisa pra fazern, então vamos por partes: a primeira vai ser ensinando o básico, a segunda vai ser personalizando e a terceira vai ser os códigos.
Bem, primeiro crie um blog novo (é mais fácil do que mecher o seu, porque pode dar errado e estragar) e vá em Modelo> Personalizar e escolha o modelo Travel.

Agora volte pra página inicial do seu blog e vá em Modelo HTML> Ctrl+F e procure por .content-outer .content-cap-top {

apague os códigos destacados:

Você pode ver que agora a sua sidebar (barra lateral) está separada da área da postagem. Então vamos ao proximo passo.

Faça uma postagem teste (no mínimo duas) e coloque o negrito, itálico, sublinhado, tachado, blockquote e o Leia mais (vai ajudar na hora de personalizar). Vá novamente em personalizar> Avançado> Plano de fundo da postageme deixe transparente. O seu blog vai ficar assim:

Agora vamos tirar essa Navbar horrorosa, Vá em Layout e lá em cima vai estar escrito "Navbar" clique e você vera que tem vários modelos, coloque no "Desativado" e salve

Agora vamos separar as postagens. Vá no HTML e procure por:

.main-inner .column-center-outer {  

Apague e até background-image: none; } coloque esse código no lugar:

.post-outer {
margin: 3px 8px 15px;
background:#ffffff;
padding: 5px 5px;
} 

O básico ta quase pronto, agora vamos ocultar o codigo da atribuição e o "Assinar postagens: Atom".

Va no HTML e procure por <b:include name='feedLinks'/>

Quando achar é só excluir e pronto :)
Agora vamos personalizar o Leia mais. Va no HTML e procure por <b:skin>, clique na setinha do lado e procure por ]]></b:skin> 
e cole esse código acime dele:

.jump-link {
text-align: center;
background-color: #fff;
border: 3px double #ebebeb;
}
.jump-link a{
color: #705587;
}
@font-face {
font-family: "Pf Arma Five";
src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf');
}
blockquote {
font-family: Pf Arma Five;
font-size: 8px;
color: #fff;
text-align: center;
box-shadow: inset 0 0 22px #F0CE90, 0 0 6px #F0CE90;
background: #F0CE90;
padding: 8px;
-webkit-transition-duration: .50s;
}

Agora está quase pronto, então vamos personalizar a sidebar, o titulo dos posts e a data e acabamos a primeira parte.
Vocês podem achar vários modelos para sidebar, é só procurar no google (deixe os creditos, sempre). Eu trouxe um do The Moon reverse pra vocês.
Procure por Widgets,

apague o que esta destacado e substitua por .sidebar .widget {
background-color: #fff;
box-shadow: 1px 1px 0 #ebebeb;
padding: 3px 4px 4px 4px;
text-align: justify;
margin-bottom: -23px;
color: #d7d7d7;
text-shadow: 1px 1px 0 #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.sidebar .widget h2 {
padding: 2px 4px 2px 4px;
margin-bottom: 3px;
margin-top: 2px;
background: transparent;
border-bottom: 3px double #ebebeb;
border-top: 1px double #f9f9f9;
letter-spacing: .3em;
font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
text-transform: uppercase;
line-height: -3px;
color: #ccc;
text-align: left;
}

Agora vá em personalizar> Avançado> Plano de fundo da barra lateral e deixe no transparente.

Agora vamos personalizar o titulo do post. Eu trouxe um modelo bem simples mas fofo pra vcs. Va no HTML> Ctrl+F e procure por h3.post-title { apague isso h3.post-title {
  margin-top: 20px;
}

h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

h3.post-title a:hover {
  text-decoration: underline;
} e substitua por:

h3.post-title {
margin-top: 25px;
text-align: center;
border-bottom: 1px dotted #d4d4d4;
}
@font-face {
  font-family: 'Delius';
  src: local('Delius-Regular'), url(http://themes.googleusercontent.com/static/fonts/delius/v3/7WQiMJKp1Jo3CiUw302zGA.woff) format('woff');
}
h3.post-title a {
font-family: Delius;
color: #f596a6;
font-size: 20px;
text-shadow: 0px 0px 1px #dadada;
letter-spacing: -1px;
-webkit-transition-duration: .90s;
font-weight: lighter;
}
h3.post-title a:hover {
color: #f77d91;
-webkit-transition-duration: .90s;
}

Agora a data. Procure por .main-inner h2.date-header { apague o codigo da data e substitua por

.main-inner h2.date-header {

 font: georgia;

color: #ffffff;

text-shadow: 1px 1px 0px #FF6EB4;

margin-left: -40px;

background:#FFC1C1;float: left;

-webkit-box-shadow: inset 0px 0px 10px #FF6EB4;

-moz-box-shadow: inset 0px 0px 10px#FF6EB4;

-ms-box-shadow: inset 0px 0px 10px #FF6EB4;

-webkit-boder-radius: 2px;

font-size: 11px;

padding: 4px;

}

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

background:#FFC1C1; }

}

Agora vamos colocar um cabeçalho. Lembre-sede fazer um cabeçalho do tamanho da área do seu post (você pode ver qual é em "Personalizar"> "Largura do blog") o meu é 900 então eu vou fazer 900x200.
Vá no seu layout> cabeçalho> escolher arquivo e escolha a imagem. Depois clique em "Em vez de titulo e descrição" e salve.

A primeira parte do seu Layout está pronta. Agora vamos ver o Antes e depois.

 Depois eu posto a segunda e terceira parte, mas por enquanto é só isso :)