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:
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----*/
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:
width: $(main.column.right.width); ( caso tenha a coluna no lado direito) ou
width: $(main.column.left.width); (caso esta for no lado esquerdo)
.main-inner .fauxcolumn-left-outer { - caso a coluna seja no lado esquerdo
.main-inner .fauxcolumn-right-outer { - caso a coluna seja no lado direitoE 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;
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
11 comentários:
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
Muito bom esse tutorial... Fazer um layout é tão cansativo... ainda mais para amadores como eu.
Abç
http://adraftbox.blogspot.com.br/
ótimo tutorial, adorei (:
http://apenas-lovatic.blogspot.com
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/
@Lara Kuerten Que bom que gostou!
Beijos...
@Jason S. Krueguer Você amador? sério? Atah...
@Heloísa Fico feliz em saber que gostou,Beijos
@Ana Clara Brigada pelos elogios e você tambem acaba de ganhar uma nova seguidores
Beijos e fique com Deus
@Carol Bortolo Aah obrigado por seguir e estou seguindo o seu blog okeey?
Adorei o post !
Seu layout é lindo !
E obrigada por me meter na listinha !!
@Beatriz Que bom que gostou...
de nada beijos...
Postar um comentário