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:
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.
