20 novembro 2012

Criando um template personalizado - Parte I


Olá!!  Boa noite meninas e meninos. Eu resolvi fazer esse tutorial, e já que o blog é novo e ainda não soltamos um tutorial, que tal nossos tutoriais serem com base de criar um layout bonito e personalizado! Já que as minhas férias já estão chegando, vai ser melhor ainda para termos tempo o suficiente para esse breve e divertido tutorial!! 
P.S.  Primeiro você vai ter que criar um novo blog ou começar tudo do zero, se não consegue desatualizar tudo que já fez, você pode criar um blog sem coerência, fazer o backup do modelo e fazer o download lá o seu blog atual.. Eu fiz um blog de teste e vocês vão acompanhar o meu blog de testes e o seu de como estava e como ele vai ficar, mas hoje nós vamos fazer apenas a base..  Então, vamos lá?
1.P- Primeiramente vamos escolher o modelo do layout. Eu recomendo o modelo Travel do blog, pois é o mais usado por nós blogueiros e nesse layout vamos usar esse. siga o passo nessa imagem:
Clique para ampliar

Então você vai em Anvançados>Planos de fundo, e coloque todos transparente, e coloque uma cor no plano de fundo da postagem, eu escolhi branco.
Agora, que o modelo nós já escolhemos vamos retirar aquelas bordas de papel que são horríveis, e que estragam o layout. Para retira-los, faça o seguinte, vá em modelo,editar html, vai aparecer três opções, você clica em prosseguir, quando abrir aperte Ctrl+F e vai aparecer uma caixinha lá em cima selecione a caixinha e procure por:
.content-outer .content-cap-top {


E vai aparecer o seguinte código:
.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);
}

Quando você procurar, vai aparecer o código que você procurou destacado de laranja, mas o que está destacado de verde, eu que destaquei pois são essas as partes em que vocês vão apagar, mas cuidado com o ponto e virgula, um erro pode bagunçar todo seu layout!  O seu layout ficará desse jeito:
                                    
                               
Agora coloque uma imagem de fundo, a que você preferir, é só pesquisar na internet, ou você faz um no photoshop, sendo ele cs1,cs3,cs5, etc. Eu fiz uma no meu photoshop cs3 que é o que eu uso, e ficou assim:
                                     
clique para ampliar
Achei bem cute, pois eu fiz a mistura de um branco com pequenos rabiscos rosinha bem clarinho!
Bem, por enquanto é só, agora é só esperar para a segunda parte!


Kisses,,  Linda Geovana!!
                                  





Um comentário: