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:


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.

6 comentários

  1. Respostas
    1. EU SEI, É OQUE O POST ESTÁ DESATUALIZADO.
      AS TABS NÃO É MUITO IMPORTANTE, MAS A SEGUNDA IMAGEM QUE ESTÁ QUEBRADA É PARA APAGAR ISSO:


      .content-outer .content-cap-top {
      ------> height: $(content.imageBorder.top.space);
      -----> background: transparent $(content.imageBorder.top) repeat-x scroll top center;
      }

      E mais abaixo vai está: .content-outer {
      e você vai apagar: padding-top: $(content.margin);

      e logo abaixo vai está também: .content-inner {
      e apague:

      background: $(content.background);
      background-position: left -$(content.imageBorder.top.space);
      background-color: $(content.background.color);
      padding: $(content.padding);

      Depois salve

      Excluir
    2. O QUE ESTÁ COM A SETA (--- > ), E O QUE ESTÁ INDICANDO

      Excluir










2011/2017 - Delicada e Abusada | Personalizado por Débora Alvim | Não copie! Encomende o seu na HTML LOVE DESIGN