Dominio: codigosblog.com.br
Chave: af255c39c6cbf2ba03ac5b531649215539d8d61a
Hora do cache: 1484568950
Vida do cache: 1485864946
Status: 1
Mensagem: Licença válida
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Blogs,
SEO e Monetização.

Hospedagem - 728 x 90

Criando um template layouts

Fazendo seu template – Parte 1 – Configurações Iniciais

Como prometi, vamos aprender a fazer um template passo-a-passo e para isso vamos usar um template de base, o template “Denim” disponível no próprio Blogger.
Não vai ser uma serie de postagens de como fazer do inicio, do 0, mas assim fica mais fácil para todos aprenderem um pouco de CSS, HTML e Loops (códigos) do Blogger.

Essa série de postagens vai gerar várias dúvidas, vou tentar ajudar todos e dependendo da quantidade de perguntas repetidas, vou criar uma página de perguntas e respostas sobre cada parte da montagem do seu template.

Antes de mais nada, crie na sua conta um blog de testes, para você fazer as modificações. Escolha o template “Denim” e clique em salvar.


Parte 1 – Configurações Inicias (largura, cores, fontes, etc)

Vamos criar os “limites” do template: os limites de espaço, fonte e determinar cores.
Para entender mais sobre CSS e HTML, recomendo que leia o seguinte post antes de começar: Um pouco sobre CSS e Mudando o fundo do seu template.

1º – Entre em “Layout” → “Editar HTML”.

2º – Vamos usar a div “outer-wrapper” já inserida no template para limitar a largura e posicionamento.

Então procuramos (Ctrl + f) o CSS:

#outer-wrapper { 

Vamos inserir a largura (width) e como exemplo vou usar 980px, uma largura perfeita para quem quer criar um template com três colunas.
Coloque:

width: 980px; 

Se quiser mudar a largura, basta trocar 980 pelo tamanho desejado.

3º – Na mesma div (outer-wrapper), vamos inserir a cor de fundo (background) onde vai ficar todas as colunas e textos e depois centralizar tudo.
Coloque:

background: #FFF;
margin: 0 auto 0;

Onde a margin vai centralizar o template e background é a cor do fundo. Você pode trocar a cor do fundo, basta adicionar o código de acordo (tabela de cores aqui).

Obs.: Recomendo uma cor clara, de preferencia branco (#FFF), para não cansar a vista de quem lê.

Depois teste e salve.

4º – Agora vamos apagar a outra formatação antiga que também está limitando o template.

Procure (Ctrl + f):

#content-wrapper {

Apague:

width: 760px;
margin: 0 auto;
padding: 0 0 15px;
border: 1px solid $borderColor;
border-top: 0;

Onde: Width é a antiga largura, margin é a antiga centralização, padding a distância do conteúdo até a borda da div e border é a borda.

Teste e salve.

5º – A navbar do Blogger não fica muito bem, então vamos retira-la:

Procure (Ctrl + f):

body {

e ANTES disso cole:

#navbar-iframe {display:none} 

Salve.

Troque as cores dos textos, links, fontes, usando a aba “Fontes e cores”.

Mais ou menos seu template está assim:

Por hoje é só, amanha tem mais... Fique calmo, aos poucos você vai perceber as mudanças.
abraços



De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

19 Comentários

  1. Ramon disse:

    Muito boa sua postagem! muitos blogueiros procuram por coisas assim valeu.

  2. vitor Marques disse:

    hehe tou estudando ainda
    mais vou aprender a fazer um template
    xd
    em breve meu primeiro template sai

    Página Brasil – Notícias-Humor e Muito Mais

  3. juniojs2 disse:

    valeu ajudou bastante.

  4. xxxx disse:

    gostaria de deixar o meu templetes com tres colunas como eu faço isso???????

  5. Guilherme Kempoviki disse:

    Não achei

    4º – Agora vamos apagar a outra formatação antiga que também está limitando o template.

    Procure (Ctrl + f):

    #content-wrapper {

    se puder me orientar meu email é gkempoviki@gmail.com
    agradeço

  6. Paulo Estevão disse:

    @xxxx
    Aguarde, chegaremos lá!

    @Guilherme, se for o mesmo template pode ter certeza que tem!

  7. Neto disse:

    tava precisando de um tutorial bom assim…

    ^^

    vlw mesmo…

  8. Tv online nilopolis disse:

    é bom mesmo !!! ^^

  9. visaoblog disse:

    eu ja fiz um apartir do modelo minima.
    fui fuçando e pegando as dicas de blogs por ai e consegui fazer.
    tudo que aprendi foi no Codigosblogs, BloggerSPhera, Templatesparanovoblogger, Templates para Você e dicas blogs (esses blogs são de +++++)

  10. Marcio Roberto Machado disse:

    Incrivel blog!

  11. mini-dicas disse:

    muito boa dica! no meu blog eu peguei um modelo pronto e depois editei.

  12. Yael Peretz disse:

    eu não entendi muito bem… como posso postar no blogger um template que montei no photoshop??

  13. Paulo Castro disse:

    Exelente, como nunca consigo encontrar um template do meu gosto, vou tentar criar um seguindo seu tutorial.

  14. Admin disse:

    a unica diferença e que meu template ficou todo centralizado as postagens os marcores!

  15. Up_TheBest disse:

    Ola amigo tudo bom to com uma curioso sobre uma coisa acho que vc pode me responder éh possivel converter um site para blog?

  16. Paulo Estevão disse:

    @Up,
    Manualmente sim.

  17. EVANGELHO VIRTUAL disse:

    Gostaria de saber se é possivel integrar pagseguro no blogger?

  18. Paulo Estevão disse:

    @Evangelho,
    não.

  19. CORSETS CHLOE disse:

    ei Paulo, eu adorei seu blog, é perfeito mesmo, só uma coisa no meu blogg eu adicionei os botoes de Pague agora e de Adicionar ao carrinho do PayPal, e outra coisa , eu ADORO suas dicas , mas nunca consigo encontrar os códigos que vc diz… dou CTRF+F e naum encontro… eu estouc riando o meu blog agora e ele esta uma bagunça…. ajuda porfa…. bjs

Para enviar seu comentário, preencha os campos abaixo:

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.