Big tutorial: Como criar um layout

      Fazer layout's já virou um vicio meu,então eu decidi criar esse Tutorial.O seu layout vai ficar simples mais bem fofo,o segredo são vários tutoriais em um só okeey?
562614_large

Primeiro crie o blog #Fato e escolha o modelo viagem e vamos lá!
Vá em design>Design do modelo e vamos fazer igual as imagens abaixo:
Só para lembrar,clique nas imagens para vê-las em tamanho original.






Esse foi só o básico,vamos ao HTML.

Separar os gadgets.

Vá no HTML>Ctrl + F e procure por /* Widgets.
E antes do } fechar cole o esse código abaixo.

background: #fff; /*----Cor do fundo do gadget----*/
  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, se não quiser apague essa linha inteira----*/

Salve,e pronto.

Vamos agora arredondar a area dos posts.

Procure por  .main-inner .column-center-outer { e abaixo desse código cole esse:

-moz-border-radius: 10px; /* Para Firefox */

-webkit-border-radius: 10px; /*Para Safari e Chrome */

border-radius: 10px; /* Para Opera
10.5+*/

Para retirar o fundo cinza que vem no modelo faça assim:

Procure por:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {   *Se você escolheu a coluna direita*

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {     *Se você escolheu a coluna esquerda*

Vai aparecer assim:

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
margin-right: $(content.padding);
background:$(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}

Apague a parte destacada de vermelho e salve!

Agora vamos colocar a barra lateral mais pra cima.

Dê Ctrl + F e procure por
 .main-inner .column-left-outer {   *Se você escolheu a coluna esquerda*
.main-inner .column-right-outer {   *Se você escolheu a coluna direita *

Caso ela seja esquerda vai estar mais ou menos assim:

  .main-inner .column-left-outer {
        width: $(main.column.left.width);
        right: 100%;
        margin-left: -$(main.column.left.width);
      }

Caso ela seja direita vai estar mais ou menos assim:

.main-inner .column-right-outer {
        width: $(main.column.right.width);
        margin-right: -$(main.column.right.width);


E logo abaixo cole o seguinte código:

margin-top: -150px;

Modifique -150px ate obter a altura desejada.


Então as letras e etc. (os gadgets) devem subir, para fazer o fundo subir junto pesquise por: 
.main-inner .fauxcolumn-left-outer { - caso a coluna seja no lado esquerdo
.main-inner .fauxcolumn-right-outer { - caso a coluna seja no lado direito
E logo abaixo de  
width: $(main.column.right.width); ( caso tenha a coluna no lado direito) ou  
width: $(main.column.left.width); (caso esta for no lado esquerdo)


acrescente novamente  margin-top: -150px; 
Faça a mesma coisa,modifique até que fique igual aos gadgets.


E agora vamos colocar o cabeçalho pelo HTML.

Procure por :  .tabs-inner {
E coloque o seuginte código abaixo de padding: 0;

background: url(endereço da imagem aqui) no-repeat;
background-position:center; 
 padding-top: 340px;

O endereço do cabeçalho você coloca onde está destacado de azul.

E terminando vamos colocar o cabeçalho mais pra cima.

Procure por b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
Acima dele coloque esse código <div style="margin-top:-50px;"> 

E depois cole esse código:
</div> 

Depois de </b:section>


Ficando assim:

<div style="margin-top:-50px;">
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Go Imagine (Cabeçalho)' type='Header'/>
</b:section></div>

modifique o -50px o quanto achar necessário.

Beijos....


Créditos: My Candy Space

Vale a pena visitar,seguir e comentar

http://utilidadedeleocatia.blogspot.com.br/                        

11 comentários:

Lara disse...

Nossa adorei o tutorial... varios em um só para ter o lay perfeito!!!!
Arrasou!!! Amei mesmo!!L

*-*

E obrigada por recomendar meu blog!

Tutosforyou.blogspot.com

Unknown disse...

Muito bom esse tutorial... Fazer um layout é tão cansativo... ainda mais para amadores como eu.
Abç

http://adraftbox.blogspot.com.br/

Heloísa Lovato disse...

ótimo tutorial, adorei (:

http://apenas-lovatic.blogspot.com

Ana Clara disse...

Flor, amei o tutorial..
Parabéns, você é bastante criativa, entrei no seu blog pela primeira vez e já estou encantada por tudo aqui, você já ganhou uma seguidora ! ^^

Beijoos, bom final de semana & fica com Deus '


http://coisasdemenina-cdm.blogspot.com.br/

Anônimo disse...

@Lara Kuerten Que bom que gostou!
Beijos...

Anônimo disse...

@Jason S. Krueguer Você amador? sério? Atah...

Anônimo disse...

@Heloísa Fico feliz em saber que gostou,Beijos

Anônimo disse...

@Ana Clara Brigada pelos elogios e você tambem acaba de ganhar uma nova seguidores
Beijos e fique com Deus

Anônimo disse...

@Carol Bortolo Aah obrigado por seguir e estou seguindo o seu blog okeey?

Beatriz disse...

Adorei o post !
Seu layout é lindo !
E obrigada por me meter na listinha !!

Anônimo disse...

@Beatriz Que bom que gostou...
de nada beijos...