Criando um layout 
Autor: Gaby Lima | Publicado: 2012-12-20T10:13:00-08:00








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.


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






-&gt; Selecione a opção personalizar!







-&gt; Selecione o modelo Travel com cores azuis como mostra o print abaixo





-&gt; Vá em Background e coloque este.



-&gt; Vá em Avançado e coloque em Plano de fundo e selecione isso:







-&gt; Vá em Plano de fundo de postagem e selecione isso:





-&gt; Vá em plano de fundo de barra lateral e selecione:





-&gt; Salve. E clique em Voltar para o blogger. Clique em editar HTML!



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



Clique aqui para ver maior



-&gt; 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:





-&gt; Salve. Já está ficando diferente né?&nbsp;



-&gt; Dê o ctrl+f e procure por&nbsp;]]&gt;&lt;/b:skin&gt; tecle enter e antes dela cole:

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


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



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



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;
}




-&gt;Vamos personalizar a barra de rolagem? Dê o ctrl+f e procure por&nbsp;&nbsp;]]&gt;&lt;/b:skin&gt; 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;}





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



&lt;div class='post-header'&gt;

&nbsp;E acima desse código cole:&nbsp;



&lt;div style="border-top: 1px&nbsp;&nbsp;dotted&nbsp;&nbsp;#707070"&gt;&lt;/div&gt;&nbsp;


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

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

-&gt; Criando um cabeçalho:



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





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&nbsp;aprimorar&nbsp;esse layout sim. Então, espero que vocês tenham entendido mais ou menos como criar um layout simples. Até a&nbsp;próxima.