25 fevereiro 2014

Criando seu próprio layout , Sem segredos! ;-)

olá meus amores...

Hoje venho iniciando para vocês um novo quadro aqui no blog vou ensinar a vocês como criar e personalizar seu blog, esse lindo que vocês estão vendo aqui foi eu que fiz! :-) eu coloquei tudo que eu queria e no fim me apaixonei por ele!!!!

E quero compartilhar com vocês para que vocês personalizem e criem seus próprios Layouts do jeitinho que vocês quiserem!!!
Vou tentar explicar bem direitinho para vocês não se perderem e no fim de cada post vou deixar os devidos créditos de onde eu aprendi a fazer cada coisinha!!!

Primeiro vamos aos matérias!

Você vai precisar de:

Um programa editor de fotos, exemplo o PhotoScape é o que eu uso vocês podem baixar ele aqui .

Um Blog de teste para criar é fácil é só clicar em  "Novo Blog" como na imagem!


Ai você digita no endereço, Blog de teste ou o que você quiser!

Agora vamos criar nosso layout base vamos a personalização do layout:

Depois de clicar em "Modelo" você ira para essa página.


Ai você ira clicar em "Personalizar" como mostra a imagem acima.

Agora escolha o modelo "Viagem" e o segundo modelo "Travel" circulado de vermelho como mostra a imagem.


Depois clique em "Avançado"ali no lado, procure "Plano de fundo da postagem" e escolha uma cor qualquer só para destacar enquanto estivermos fazendo as modificações no HTML.



Clique em aplicar ao blog e depois em voltar para o blogger. Agora vamos 
mexer no HTML do blog.



Clique em editar HTML.


e aparecerá essa página:

clique em :

Vamos começar as modificações. Primeiro vamos tirar aquelas bordinhas de papel horrorosas. 

Aperte Ctrl+F dentro da área onde fica os códicos (se clicar fora vai aparecer outra caixa de busca a do navegado) e procure por .content-outer .content-cap-top {

Logo abaixo disso, você irá apagar apenas o que está destacado em "VERDE" na imagem, nada mais nada menos! ATENÇÃO para os ponto e vírgula.


Seu layout deve ficar assim:



Para o próximo passo, precisamos colocar uma imagem de cabeçalho no blog.
 Eu fiz uma só para dar o exemplo, mas você já pode usar a sua imagem definitiva. Lembre-se sempre de fazer uma imagem da largura do seu blog (Veja qual é a largura no designer de modelo).

Para a Largura do Blog eu recomendo 1100 e para a barra lateral 320 vejam:

Depois de escolher sua largura não se esqueça de clicar em "APLICAR AO BLOG" .


Vá em layout clique em "Editar" no gadget do cabeçalho:


Vai abri uma janela, lá você clica em "Fazer upload da imagem" e escolhe sua imagem de topo. Em posicionamento, marque a opção "Em vez de título e descrição". Quando a imagem for totalmente carregada, é só salvar.

Agora vamos voltar para o Modelo HTML do blog. (Modelo > Editar HTML > Prosseguir)
Iremos retirar aquele espaço que fica entre a imagem do cabeçalho e o resto do blog. A maioria dos layouts fica melhor sem aquele espaço, mas se você achar que não precisa tirar, pule essa etapa.

Aperte Ctrl+F e procure por/* Tabs
Logo abaixo você verá esse código:

.tabs-inner {
  margin: 1em 0 0;
  padding: 0;
}


Apague o que está riscado.

Aperte Ctrl+F de novo e procure por .main-inner {

Logo abaixo desse código, você vai acrescentar essa linha: margin-top: -20px;


Agora é só modificar o número (20) até ficar do jeito que você quer. Altere o número e vá visualizando até não sobrar nenhum espaço.
Se você quiser aumentar esse espaço, é só tirar o sinal de menos (-).

Já fizemos as principais modificações no nosso layout. Depois de salvar o HTML você pode ir para o designer do modelo e colocar uma imagem de fundo. 
Para isso clique em Modelo > Personalizar > Plano de fundo. Clique no quadrado que tem a miniatura do plano de fundo atual, depois clique em "Fazer upload da imagem" e escolha a imagem que quiser. 


Algumas imagens de fundos aqui .


O meu que estou fazendo junto com vocês ficou assim:


Primeiro passo dado meus amores... mais temos muitas coisas para personalizar..
Fiquem ligadinhos para o próximo passo para não perderem se inscreva aqui no topo da barra lateral escreva seu e-mail para receber o post em seu e-mail assim que postar! legal néh! ;-)

Espero que tenham gostado meus amores como disse vou dar os devidos créditos esse layout básico eu aprendi no blog Cherry Bomb.

Um big beijo meus amores Desculpem pelo post enorme :-) !! 





Nenhum comentário:

Postar um comentário

Obrigada pelo comentário..volte logo para ver sua resposta!! bjinhoss

- See more at: http://www.ecleticus.com/2011/10/slide-que-funciona-automatico-no.html#sthash.Xv6zjejc.dpuf