Boa Noite amores!Em primeiro Lugar ...
Venho Pedir desculpas, porque esse tutorial era pra ter saído hoje logo no inicio da tarde, porem meninas meu filho ta doente e não consegui fazer o post mais cedo tive que ficar com ele grudado em mim o tempo todo, só febre e mais febre alta =/ ....Mais, como prometido conseguir terminar o post! (antes tarde do que nunca né?)
Bom....!
Hoje vamos começar com a parte mais gostosa do Tutorial! Que é deixar o Layout do jeitinho que queremos!(Finalmente em Aline...) Então sem mais delongas Vamos Personalizar!
Para LER a postagem inteira click em "CONTINUE LENDO"
Na Ultima aulinha vocês criaram o Blog de Teste certo?
Para Começar você vai clicar no seu blog teste e assim que abrir Clicar na opção modelo
VEJA O EXEMPLO ABAIXO:
 |
| IMAGEM DO GOOGLE |
Vamos começar! Depois de estar na pagina de modelo clique em personalizar o botãozinho laranja como podem ver na imagem acima....
Dentro dessa Opção personalizar veremos as seguintes opções:
Clique na opção avançado, Plano de fundo da postagem e coloquem na cor BRANCA porque quando for mexer na opção do HTML o fundo aonde fica escrito o texto da postagem vai sumir!
Feito isso clicam la em cima em aplicar no blog.. Feito isso visualizar (clique em visualizar) e agora volte ao blogger.
Feito Isso agora vamos deixar o Blog bonitinho com o Passo numero 2!
Vá em Editar HTML
Primeiro vamos tirar aquelas bordinhas de papel horrorosas. Aperte Ctrl+F e procure por
.content-outer .content-cap-top {
Logo abaixo disso, você irá apagar apenas o que está destacado em verde logo Abaixo, nada mais nada menos! Atenção para os ponto e vírgula.
.content-outer .content-cap-top {
height: $(content.imageBorder.top.space);
background: transparent $(content.imageBorder.top) repeat-x scroll top center;
}
.content-outer {
margin: 0 auto;
padding-top: $(content.margin);
}
.content-inner {
background: $(content.background);
background-position: left -$(content.imageBorder.top.space);
background-color: $(content.background.color);
padding: $(content.padding);
}
'Nota:Os únicos que você vai apagar por inteiro são só os dois " Padding:$(content.Padding);" E " Padding-top:$(content.margin); " '
Seu Layout Devera Ficar assim:
Viu já ta ficando melhorzinho não é?
Agora vamos tirar o espaço entre a área das postagens e a barra lateral....
Visualize como ficou e veja que agora a sidebar está coladinha nos posts. Salve as alterações e vá para o layout do seu blog.
.content-outer .content-cap-top {
height: $(content.imageBorder.top.space);
background: transparent $(content.imageBorder.top) repeat-x scroll top center;
}
.content-outer {
margin: 0 auto;
padding-top: $(content.margin);
}
.content-inner {
background: $(content.background);
background-position: left -$(content.imageBorder.top.space);
background-color: $(content.background.color);
padding: $(content.padding);
}
'Nota:Os únicos que você vai apagar por inteiro são só os dois " Padding:$(content.Padding);" E " Padding-top:$(content.margin); " '
Seu Layout Devera Ficar assim:
Viu já ta ficando melhorzinho não é?Agora vamos tirar o espaço entre a área das postagens e a barra lateral....
Bom! Aqui no blog, a barra lateral tem uma certa distancia da área das postagens!
E se você quer que a barra lateral fique assim, separadinha como na imagem acima PULE ESSA PARTE DO TUTORIAL.
Vá na parte de Editar o Html e Aperte Ctrl+F novamente e procure por:
Vá na parte de Editar o Html e Aperte Ctrl+F novamente e procure por:
" .main-inner .column-right-inner { "
Apague somente o que estiver em destaque novamente. Dessa vez você pode apagar os ponto e vírgula.
Apague somente o que estiver em destaque novamente. Dessa vez você pode apagar os ponto e vírgula.
.main-inner .column-right-inner {
margin-left: $(content.padding);
}
.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
margin-left: $(content.padding);
background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}
.main-inner .column-left-inner {
margin-right: $(content.padding);
}
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
margin-right: $(content.padding);
background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}
Seu Layout Devera fica assim :
Visualize como ficou e veja que agora a sidebar está coladinha nos posts. Salve as alterações e vá para o layout do seu blog.
Bom meninas na quarta feira eu volto com mais não com a parte 3 do tutorial e sim com materiais, Fundos enfeites fontes faixinhas e etc... Pra que na SEXTA FEIRA tenham o material pra personalizar o blog do jeito que quiserem!
Meninas não posso deixar de dar os Créditos ao maravilhoso C.B(Falecido blog de tutoriais) e G.I(acho que foi pro mesmo caminho) Que me ensinaram tudo que eu sei! *-*
Beijinhos meninas! Terça Feira e Quinta Feira é com os tutoriais maravilhosos da JANA
