Criando um layout

Oi galera, hoje o tutorial é muito grande. Mas eu estou fazendo ele á pedido de uma amiga do twitter. Enfim, se você já sabe fazer um layout só ignore esse post. Sem delongas clique em Let's Go para por a mão na massa. Lembrando, que esse tutorial é bem básico, porém fofo.

-> Vá no blogger, selecione o blog que você deseja fazer o layout e clique em modelo.

-> Selecione a opção personalizar!

-> Selecione o modelo Travel com cores azuis como mostra o print abaixo

-> Vá em Background e coloque este.

-> Vá em Avançado e coloque em Plano de fundo e selecione isso:

-> Vá em Plano de fundo de postagem e selecione isso:

-> Vá em plano de fundo de barra lateral e selecione:

-> Salve. E clique em Voltar para o blogger. Clique em editar HTML!

-> Dê o ctrl+f e procure por .content-outer .content-cap-top { e apague os códigos que aparece no print

Clique aqui para ver maior

-> Salve. Agora procure por Widgets e cole isso antes de }

background: #fff; /*---- cor do fundo da caixa ----*/
	padding-left: 20px; /*---- espaço à esquerda ----*/
	padding-bottom: 20px; /*--- espaço de baixo ---*/
	padding-right: 20px; /*--- espaço à direita ---*/
	padding-top: 5px; /*---- espaço de cima ----*/
	border-radius: 5px; /*---- bordas arredondadas, apague a linha se não quiser ----*/
	box-shadow: 1px 3px 15px 2px #ccc; /*---- sombra da caixa ----*/

Print:

-> Salve. Já está ficando diferente né? 

-> Dê o ctrl+f e procure por ]]></b:skin> tecle enter e antes dela cole:

#navbar-iframe { height: 0px; visibility: hidden; display: none; }

-> Vamos separar os post's?  Dê o ctrl+f e procure por: .main-inner .column-center-outer { vai aparecer mais ou menos isso:

.main-inner .column-center-outer {  background: $(post.background.color) $(post.background.url) repeat scroll top left; _background-image: none; }

Apague toda essa parte e substitua por isso:

.post-outer {
	background: #fff; /* Fundo da postagem */
	padding-top: 4px; /* Espaço do topo */
	padding-left: 5px; /* Espaço da esquerda */
	padding-right: 5px; /* Espaço da direita */
	padding-bottom: 5px; /* Espaço de baixo */
	margin: 5px 3px 25px;
	border-radius: 10px;
	margin-top: 35px;
	}

->Vamos personalizar a barra de rolagem? Dê o ctrl+f e procure por  ]]></b:skin> antes dela cole:

/***Barra de rolagem***/
	::-webkit-scrollbar{width:10px;height:3px;}
	::-webkit-scrollbar-button:start:decrement::-webkit-scrollbar-button:end:increment{display:block;height:0;background-color:transparent;}
	::-webkit-scrollbar-track-piece{background-color:#ffffff;-webkit-border-radius:0;-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;}
	::-webkit-scrollbar-thumb:vertical{height:50px; background-color:#FFC1C1;-webkit-border-radius:12px;}
	::-webkit-scrollbar-thumb:horizontal{width:50px; background-color:#ddd;-webkit-border-radius:px;}

-> Vamos centralizar e personalizar o titulo dos posts? Clique em expandir modelos de Widgets dê o ctrl+ f e procure por:

<div class='post-header'>

 E acima desse código cole: 

<div style="border-top: 1px  dotted  #707070"></div> 

Para centraliza-los procure por h3.post-title a { e cole esse código depois dessa tag:

text-align:center;
font: $(post.title.font);
color: #90EE90;
border-bottom: 1px solid #000;

-> Criando um cabeçalho:

Se você tem um photoscape, salve essa imagem que é transparente ela não vai aparecer por que é transparente, salve. Edite como quiser, coloque o nome do seu blog, enfim, personalize. Após isso faça o seguinte: 

E ai vocês já sabem o que fazer. Para o layout ficar bonito, eu colocaria cortininha,mas como o tutorial é de um simples layout eu não vou ficar explicando muita coisa. Os tutoriais aqui do blog vão ajudar a aprimorar esse layout sim. Então, espero que vocês tenham entendido mais ou menos como criar um layout simples. Até a próxima.