Como criar um template para Blogger / Blogspot

Como criar um template para Blogger / Blogspot

6 10 99
Como criar um template para Blogger / Blogspot 10 6 99
Há menos de 24 horas atrás, seria impossível escrever um post com o título acima. A criação e customização de templates sempre foi algo tão complicado, que ensinar isso em posts sempre me pareceu inviável. Tanto é verdade, que existem blogs inteiros dedicados ao tema, ou seja, com muitas e muitas postagens somente sobre HTML, CSS e afins.
Com o advento (<=que palavra chique) do recurso Designer de Modelos, qualquer um será capaz de fazer um template totalmente personalizado, mesmo sem entender absolutamente nada de códigos. Basta ter criatividade e vontade de aprender. Vamos lá?

É  altamente recomendável que vocês façam um backup do atual template
Tutorial Dicas Blogger – todos os direitos reservados
A primeira coisa a ser feita é acessar o Blogger in Draft ( a página de testes de novas funções do Blogger), procurar pelo link layout e depois por designer do modelo:
Painel do Blogger - layoutPainel do Blogger - designer de modelo
Preparem-se para o impacto, pois vocês serão direcionados para algo moderno e inovador.
Ferramentas para criação do template
Na parte superior, estão todas as ferramentas para customizar o seu novo template e na parte inferior, irá aparecer o atual modelo do seu blog. À medida que vamos aplicando os novos recursos, eles já vão aparecendo na parte inferior. Legal, né?
Na guia modelos (1), iremos escolher um dos templates pré-fabricados (2), clicando sobre eles. Logo abaixo, existem as variações do tema (3), com mudanças nas cores.
Guia modelos
Na guia plano de fundo (1) , podemos alterar a cor do tema do nosso template (2) ou inserir uma imagem de fundo (3). Existem diversos modelos, todos lindos ;)
Plano de fundoImagens para o plano de fundo 
Na guia layout (1) é que a brincadeira começa a esquentar. Em layout do corpo (2), escolheremos a disposição do post e das barras laterais (sidebar) do novo template (3). Atentem-se aos diversos formatos que foram disponibilizados pela Equipe do Blogger :D
Layout
Ainda na guia layout, ao clicarmos em layout do rodapé (1), escolheremos o modelos do rodapé do template (2) –  com uma coluna, duas ou três.
Rodapé
Em ajustar largura (1), podemos ir acertando a largura (2) da área de postagens e das barras laterias (sidebar), de acordo com nossas necessidades.
Largura
Na guia avançado (1), temos as opções de personalização das fontes e cores (2) de diversas áreas do template, tais como links, título do blog, plano de fundo e etc.
Fontes e Cores
Deslizando a barra de rolagem até o final, encontramos um campo para códigos CSS (1)
CSS E aqui está uma prévia do futuro template do Dicas de informática ( meu falecido blog )
prévia do template
Para retirar a navbar, cole o seguinte código no campo para CSS e aperte enter
#navbar-iframe { height: 0px; visibility: hidden; display: none; }
Para deixar a navbar invisível, cole este código no campo CSS
#navbar-iframe { height: 0px; visibility: transparent; display: transparent; }
Ficou legal? Agora é só apertarmos o  botão aplicar no blog (1). Simples assim :D
Como nem tudo é perfeito, notei que gadgets que sempre ficaram invisíveis, como o do Google Analytics por exemplo, passaram a aparecer em branco, porém sombreados.
Pequeno problema
ATUALIZAÇÃO: Este problema pode ser resolvido, enviando os gadgets invisíveis para o footer ( rodapé ) e não acontece em todos os modelos. Bom, né?
IMPORTANTE: Todos os hacks que estavam instalados no template anterior, serão perdidos com esta mudança e várias funções já padronizadas no código do Blogger serão inseridas no novo template. Neste exemplo que usei, o hack para artigos relacionados, desapareceu. Em compensação, apareceram diversas funções nativas, tais como as avatar nos comentários, o jump break e as estrelas para votação dos posts
E agora, #comofaz? Basta reinstalar todos os hacks através do “editar html” do template. .
Se você usava um hack para resumir os posts na página inicial (hack Leia Mais) e não o Jump Break do Blogger, vai compensar muito mais reinstalar o hack do que ter que colocar o jump break em todos os posts manualmente.
Outra detalhe interessante: nenhum gadget será perdido e podemos movimentá-los dentro da própria área pertencente ao Designer de Modelo.
Em caso de arrependimento, pegue o arquivo .xml que você salvou no começo deste post, entre na guia layout, procure por “editar html” e faça o upload do seu antigo template.
Acredito que, em breve, este novo recurso já estará disponível na página oficial do Blogger.
63 Comments
Comments
  1. Obrigada Juliana, só estava esperando o tuto, agora vou lá colocar a mão na massa
    (tá tão bem explicadinho que ñ tem como errar,né pessoal?)
    Bjos querida!

    ResponderExcluir
  2. juliana, o meu blog não tem suporte algum pra novas implementações... será que acontece com muitos templates? quando pensei que iria mudar algumas coisas no meu template......

    ResponderExcluir
  3. Bom saber, mas não vou mudar.
    Meu atual está ótimo.
    Abração!

    ResponderExcluir
  4. Poxa, no meu não aparece essa opção... ;___; *sente-se rejeitado* Aindavai levar um tempo pra aparecer pra todos ou é meu template que não tem suporte pra essa opção?

    ResponderExcluir
  5. Diego e th3m@d0xt3r, acessem pelo Blogger in Draft (link do começo do post)

    ResponderExcluir
  6. Já estou 'brincando' com a novidade! As possibilidades são infinitas...E o legal é que você pode através do painel mesmo inserir seu nome (Direitos autorais (opcional) ) e aparecerá no rodapé do blog, sem precisar entrar no html!
    São tantas emoções rsrs, ainda continuo eufórica com a novidade *--*

    ResponderExcluir
  7. Porque meu blogger ainda naum diponibilizou essa ferramenta como aparece no seu tuto

    ResponderExcluir
  8. Juliana
    Que belo tutorial! Toda a gente vai ser capaz de criar template depois de ler este post magnífico. Não te importas que eu faça um link num post do meu blog para este magnífico texto?
    O Blogger está, do meu ponto de vista, melhor que o Wordpress. Eu não trocaria mesmo que não perdesse links e page rank.

    ResponderExcluir
  9. Luz, que tal acessar pelo Blogger in Draft? O link está dentro do post.

    ResponderExcluir
  10. Ramiro, fique à vontade para linkar o post ;)

    ResponderExcluir
  11. Ju!
    era tudo que eu queria para melhorar o blog que administro!!!!
    Assim q eu ganhar um tempinho vou colocar a mão na massa!!!!! Show de bola!

    ResponderExcluir
  12. Essa novidade é excelente, na minha opinião. Esses novos recursos darão muito mais autonomia para os novatos na plataforma, o que acredito ser muito bom. Demonstra que o Blogger se preocupa com todos os seus usuários, independente de seu nível de conhecimento em linguagem HTML.

    Abraço.

    Idenaldo

    ResponderExcluir
  13. Não podem esquecer também que pode adicionar CSS eu testei até o Hack para tirar a Navbar e pegou

    ResponderExcluir
  14. Sei que isso é impossivel e uma pergunta que devera ter como resposta um grande Não mais sera que é possivel instalar o cutenews no blogger??assim como no 110mb.com??

    ResponderExcluir
  15. Realmente a função ficou muito boa. Ontem fucei bastante mas comi bola na área de ajustar a largura por exemplo. Não encontrei a opção. Vou testar novamente, com certeza. Ótimo tutorial Juliana, parabéns!

    ResponderExcluir
  16. Olá Juliana.

    Que maravilha esta notícia, só que não estou conseguindo colocar o "leia mais", já tentei e não consegui, pode em ajudar por favor? obrigada.
    Deus te abençoe. como sempre seu trabalho mil.

    Tânia

    ResponderExcluir
  17. Interessante, mas como disse antes, ficaria 100% mesmo se pudéssemos colocar as nossas imagens,não somente estas. Ficaria algo mais pessoal.

    ResponderExcluir
  18. Porque quando eu crio meu template não aparece a linkbar e obrigado pela dica .

    ResponderExcluir
  19. Eu sempre tive o interesse de criar um template. Comecei a estudar mas a faculdade sugou todo o meu tempo. Vou testar essa nova funcionalidade.

    @Robhym

    ResponderExcluir
  20. gostaria de saber se é possível ter um cabeçalho com imagens aleatorias nesses novos templetes.
    tentei excluir o cabeçalho e colocar as imagens porém o cabeçalho sempre volta abaixo das imagens deixando o layout muito feio.

    ResponderExcluir
  21. olá ,meu nome é vinicius tenho 12 anos ,ja sei mecher com o blog incluindo,o editar rtml,entre outras coisas ,ja usei muitos Templates desse site ,principalmente o template Songs,agora entendi como você faz os tempates ,mas a minha duvida é como tirar aqueles creditos que ficam em baixo do site quando você usa s modelos do blog draft,espero resposta até+ :)

    ResponderExcluir
  22. Vinícius, aprenda desde já: JAMAIS retire créditos de qualquer template. É preciso valorizar o autor da obra. Abraços

    ResponderExcluir
  23. Olá, eu entrei pelo blogger in draft mas, como foi dito pelos amigos acima, parece que alguns templates não permitem as mudanças. No meu aparece assim: Este modelo não permite personalizações de layout.

    Existe saída pra isso?

    ResponderExcluir
  24. Lu-Bau.Blog se você for na guia avançado,no final, existe um campo "adicionar CSS" ,você upa uma foto em qualquer banco de imagem , e usa este codigo nessa aba.

    }
    .body-fauxcolumn-outer {
    background-image: url(http://www.endereçoDaFoto.com/nomeDaFoto.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed
    }

    Desculpe me se ñ for essa a dúvida, se vc for nessa aba avançado/adicionar css tem este link de explicação do blogger http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=175740. E Juliana ,obrigada pelo ótimo post,estava prcurando algo assim a muito tempo , valeu.

    Marcio

    ResponderExcluir
  25. Adorei as suas dicas, super bem explicado!
    Mas apesar da minha conexão ser rápida, por algum motivo não aparece o modelo que estou criando na parte de baixo. O treco fica carregando, carregando... mas nunca acaba, e assim não consigo visualizar as mudanças que estou tentando implementar.
    Mesmo assim, parabéns pela informação e pelo carinho ao tentar nos ensinar as funcionalidades.

    ResponderExcluir
  26. Eduardo e MHMS, eu já usei o recurso em 4 blogs diferentes e não tive nenhum problema, mas devemos lembrar que o Designer de Modelo ainda está em fase de testes.

    ResponderExcluir
  27. Eu tava editando um template na unha, tava dando trabalho pra caramba, ai resolvi testar sua ideia e axo que ficou muito melhor do que o que eu tava editando.

    Obrigado por compartilhar a informação.

    ResponderExcluir
  28. Juliana, eu achei essa nova fucionalidade interessante, mas achei extremamente limitada.

    Por exemplo, quando escolhemos o plano de fundo ficamos obrigados a escolher somente os que estão ali, acho que seria muito mais interessante se nenhuma foto que ali está não agradar a pessoa poderia ter uma opção de fazer o upload de uma imagem que estivesse no computador da mesma.

    Outra coisa, os modelos dos templates que estão ali são somente 4 com algumas variações.

    Realmente achei interessante a funcionalidade, mas extremamente limitada, sinceramente acho que poderia ser acrescentado muita coisa ali, contudo a idéia foi boa, mas como eu disse precisa ser mais trabalhada.

    ResponderExcluir
  29. Juliana eu editei um template com a função nova, mas toda vez que retiro a Navbar do modelo o cabeçalho desce, no Chrome, Firefox e no IE.
    http://www.cqcblog.com/

    Pode me dar um help??

    ResponderExcluir
  30. Tão simples que nós da area de TI e Programação tamu tudo Ferrado pra nçao fala outra coisa...

    ResponderExcluir
  31. por gostei dessa opição so q no meo blog ñ tem essa opção ñ como eo ativo ela??

    ResponderExcluir
  32. Adorei as dicas. Com o tutorial ficou facinho fazer... já testei uns 3 modelos!
    Obrigada!

    ResponderExcluir
  33. Gostei paks da dica, eu já tinha reparado que algo tinha mudado no blogeer, mais eu fiquei com priguiça de ver o que era, hoje eu resolvir mudar o template do meu blog, e ficou muito bom!

    ResponderExcluir
  34. Legal este post, gostei muito. Ralei muito para estudar html , css, java script e outras linguagens para poder construir o atual template do meu blog.

    derrepente, a Blogger nos surpreende com este presente para todos os BLOGGueiros.

    Interessante esse post. Vou Recomendá-lo em meu blog.

    ResponderExcluir
  35. q pena que o meu blog não tem esse link!
    do duro pesquizando coisas para colocar um template novo e quando tenho a oportunidade ela não aparece!
    estou mto triste mesmo

    ResponderExcluir
  36. Oi Juliana, muito obrigada pelas dicas, já alterei meu Blog, mas gostaria de saber... quando poderemos utilizar de vez o Designer de Modelo? É que só tenho como usá-lo quando acesso pelo Blogger in Draft, através daqui da sua página...
    Tem como já deixar esse Designer sempre em meu Blog ou ainda está em teste?
    Obrigada
    Kika

    ResponderExcluir
  37. Oi Juliana, gostei muito do seu tutorial,segui ele e havia dado tudo certo, mas depois de um tempo começou a dar alguns errinhos, e eu não consegui arrumar, sou novata nessa área.
    Onde fica os créditos embaixo, em vez de ficar do tamanho normal está comprido ficando uma faixa larga enorme...Se puder me ajudar agradeço... ^^

    ResponderExcluir
  38. ADOREI o post. MUITISSIMO útil...te devo a minha vida....ehehehehe

    ResponderExcluir
  39. Adorei a dica.
    Eu estava desesperada tentando mudar meu template ja fazia um tempão.
    E vc chega e nos apresenta essa maneira tão facil?
    Obrigada de coração, vc salvou a minha vida!!!

    ResponderExcluir
  40. Muito bom o tema proposto neste blog.Pena que ainda não se aplica a todos os Blogs, levo de exemplos os meus, os quais um já está atualizados com novos template(s) e o outro ainda está indisponível.

    O que ainda não descobri é que: será que estará disponível a todos em breve ou isso depende do Layout escolhido?

    Parabéns pelo trabalho, vou colocar em meu blog e virar seguidor. Abraços

    ResponderExcluir
  41. Juliana só uma coisa que eu tenho pra dizer para vc:
    VC É D+ muito obrigado mesmo modifiquei totalmente o template do meu blog, e com isso recebi elogios de que está muito melhor do que antes,e eu amei esse post seu muito origado mesmo!

    Obrigado

    ResponderExcluir
  42. Adorei o post! Muito obrigada pelas dicas, já fiz umas experiências e modifiquei o layout do meu blog...
    Parabéns pelo blog! Abraço

    ResponderExcluir
  43. Muito obrigado pelas dicas! O conteúdo do seu blog é sensacional. (:

    C. - BeboeBaixo
    http://beboebaixo.blogspot.com

    ResponderExcluir
  44. Vlw, criei meu tamplate e fico muito fera

    ResponderExcluir
  45. Muito, muito massa essa dica. Adorei o blog de vcs e gostaria de parabenizá-los. Na oportunidade, aproveito para perguntar, por que não estou conseguindo colocar imagens nos post? Sede não é nada, imagem é tudo! Tô no aguardo!

    ResponderExcluir
  46. ai amei a dica , super facil , não tem como errar *-*' , ja arrumei o meu fico lindo s2 , obrigada mesmo *-*'

    ResponderExcluir
  47. o meu não tem a opção 'designer do modelo' , poxa que mole .-.

    ResponderExcluir
  48. só uma palavra

    OBRIGAAAAAAAAAADAAAAAAAAAAAAAAAAAAAAAA

    ETERNAMENTE!

    Estava muito infeliz com a cara xoxa do meu blog, e a minha experiência com html é nula!

    OBRIGADAAA!

    ResponderExcluir
  49. Oi Juliana, eu utilizo esse novos templates mas gostaria de colocar um plano de fundo pessoal a partir do meu computador mas ainda não deu certo. Ja tenho a imagem no picasa e tento puxar de lá mas não da certo nunca. Como posso fazer?

    ResponderExcluir
  50. Nossa na ultima vez q vi um tutorial desse foi num site ai e tava mt mal explicado agora q achei esse eu fiz direitinho amey o jeito q vc ensinou amey msm obg *_*

    ResponderExcluir
  51. Obrigada pelas dicas, Juliana! Muito bom o post ;)

    ResponderExcluir
  52. tem algum jeito de colocar uma imagem do proprio computador como imagem de fundo?

    ResponderExcluir
  53. Gostaria de aprender a criar um pelo fireworks e dreamweaver.

    Att: Rogèrio

    ResponderExcluir
  54. ainda sim, ñ dá pra criar um template personalizado com os recursos Blogger. ¬¬ a pessoa temq editar html mesmo!? fala sério

    ResponderExcluir
 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top