Criando Um Template Lindinho

Bom agora essa vai ser uma das postagens de novembro como avia prometido.
Aí está o tutorial que vocês estavam esperando... Então vamos lá e chega de ladainhas.
Mãos a Obra   mãos no seu blog.

1- Faça login do seu blog.
2- entre em Designer >> designer do modelo
3- Agora em modelos escolha o modelo ( VIAGEM) se o seu blogger estiver em outra língua procure por ( Travel) que é a mesma coisa. assim que achar clique sobre ele e espere um pouquinho. e aparecerá isso:

4- a onde está na imagem selecionado de laranja é o qual que você deve clicar depois que você clicou no viagem. Depois disso clique em '' Aplicar Ao Blog ''.

5- Feito, clique agora em planos de fundos. exclua aquela imagem:

6- feito isso, clique em aplicar ao blog.

7- clique em ajustar larguras, ajuste assim:

8- depois disso , salve.

9- agora vamos para layout escolha desse modelo:

10- salve e agora vamos para os avançados, Clique em Texto da página. ( se você for menina escolha a font chemy) como sou garota escolhi a fonte CHEMY você pode escolher outra se você quiser. depois chega a hora da cor, escolha a cor que quiser, e o tamanho também.

11- quando estiver tudo ao seu gosto salve, e agora vamos para Planos de fundo.deixe a cor que você quiser. Eu fiz assim:

12- vai agora em títulos do blog. e deixe tudo assim:

13- depois em descrição do blog, deixe em transparente.

14- salve, e agora vamos para planos de fundo das postagens.deixe uma cor clara.

15- salve e agora vamos para planos de fundo da barra lateral, deixe também em uma cor clara.

15-salve, e agora vamos clicar em '' Voltar Para O Blogger ''.

16- depois clique em Editar Html.

17- agora no Html, você vai juntar a barra lateral com a parte das postagens. vamos lá.

no seu Html clique Ctrl+F, e procure por 

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {

Assim que encontrar apague o que esta de vermelho na imagem abaixo:

18- quando apagar clique em visualizar,para ver se juntou, o seu deve ficar assim:

se o seu ficou assim clique em salvar modelo.

19- agora ainda no Html, vamos juntar o Header (cabeçalho) com a barra lateral e a parte das postagens.

vamos lá:

Clique Ctrl+F e procure por:

/* Tabs

assim que achar, apague somente isso:

logo em seguida clique Ctrl+F e procure por:

/* Main

quando achar, logo abaixo de padding: $(content.padding) 0;  logo abaixo cole isso:

margin-top: -20px;

quando colocar clique em visualizar, e salve o modelo.

20- agora vamos retirar aquela borda horrorosa da quele template:

Bem ainda no Html, vamos clicar Ctrl+F e procure por: content-outer .content-cap-top {   quando achar, apague somente o que esta destacado de vermelho.

21- Bem agora vamos personalizar a área dos comentários. entre nesse site:

http://status-e-nicks.do.comunidades.net/index.php?pagina=1318609286

e guarde, vai lá no seu Html e clique Ctrl+F e procure por:

#comments

substitua isso:

#comments {

  background: $(comments.background);

  padding: 15px;

}

por isso:

#comments {
 background: #FFFAFA; none repeat scroll top center;
padding: 15px;
}

A onde está escrito de vermelho substitua pelo código da cor desejada na quele site citado no começo do passo a passo 21. e salve. e visualize seu blog na parte dos comentários, se der errado volte no Html e clique em limpar edições.

22- agora vamos mudar o seu favicon:

para mudar esse favicon clique nesse tutorial.

23- pronto assim que fizer isso tudo. clique em salvar modelo e visualize seu blog.

24- se voce quiser por uma imagem no plano de fundo, volte em deigner do modelo, e clique em planos de fundo  e clique em nenhum num plano de fundo sem imagem:

Se você quiser os planos de fundo do blog clique em abstrata se você tem uma imagem para por como plano de fundo clique em Fazer uplaod da imagem e escolha a imagem desejada e clique em abrir. espere a imagem ser carregada quando aparecer clique em concluir visualize e salve.

25- agora vamos subir a barra lateral do seu blog, olhe o passo a passo:

olha só altere os número exemplo:  margin-top: -150px;      para :margin-top: -100px;

Para subir a coluna esquerda do blog, vá em Editar HTML, aperte Ctrl F e procure por:



.main-inner .column-left-outer {


Deve estar provavelmente assim:



.main-inner .column-left-outer {

        width: $(main.column.left.width);

        right: 100%;

        margin-left: -$(main.column.left.width);

      }

Então acrescente logo abaixo desse código antes do colchete :

margin-top: -150px;


E vai ficar assim:

.main-inner .column-left-outer {

        width: $(main.column.left.width);

        right: 100%;

        margin-left: -$(main.column.left.width);

        margin-top: -150px;

      }

E assim as letras subirão. Agora, para fazer o fundo da barra lateral subir, Aperte novamente Ctrl+F e procure por:

.main-inner .fauxcolumn-left-outer { 


Deve estar em seu HTML assim :



.main-inner .fauxcolumn-left-outer {

       width: $(main.column.left.width);

      }

Cole então esse código antes de fechar os colchetes:

margin-top: -150px;


E ficará assim : 

.main-inner .fauxcolumn-left-outer {

        width: $(main.column.left.width);

        margin-top: -150px;

      }

Agora para subir a coluna direita, faça assim:

Vá em Editar HTML, aperte Ctrl F e procure por:


.main-inner .column-right-outer {


Deve estar provavelmente assim:



.main-inner .column-right-outer {

        width: $(main.column.left.width);

        right: 100%;

        margin-left: -$(main.column.left.width);

      }

Então acrescente logo abaixo desse código antes do colchete :

margin-top: -150px;


E vai ficar assim:

.main-inner .column-right-outer {

        width: $(main.column.left.width);

        right: 100%;

        margin-left: -$(main.column.left.width);

        margin-top: -150px;

      }

E assim as letras subirão. Agora, para fazer o fundo da barra lateral subir, Aperte novamente Ctrl+F e procure por:

.main-inner .fauxcolumn-right-outer { 


Deve estar em seu HTML assim :



.main-inner .fauxcolumn-right-outer {

       width: $(main.column.left.width);

      }

Cole então esse código antes de fechar os colchetes:

margin-top: -150px;


E ficará assim : 

.main-inner .fauxcolumn-right-outer {

        width: $(main.column.left.width);

        margin-top: -150px;

      } 

26- agora salve. e vai em elementos da pagina onde esta escrito cabeçalho, clique em editar. escolha a imagem. e salve. pronto veja seu blog como ficou lindo e legal.