Como criar um template para Blogger / Blogspot - Dicas Blogger '+g+"
Home » Template/Layout » Como criar um template para Blogger / Blogspot
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:
Preparem-se para o impacto, pois vocês serão direcionados para algo moderno e inovador.
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.
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 ;)
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
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.
Em ajustar largura (1), podemos ir acertando a largura (2) da área de postagens e das barras laterias (sidebar), de acordo com nossas necessidades.
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.
Deslizando a barra de rolagem até o final, encontramos um campo para códigos CSS (1)
E aqui está uma prévia do futuro template do Dicas de informática ( meu falecido blog )
Para retirar a navbar, cole o seguinte código no campo para CSS e aperte enter
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.
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.
Anônimo 11 de março de 2010 23:57
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?)
Game Cover 12 de março de 2010 00:04
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......
Anselmo 12 de março de 2010 02:12
Bom saber, mas não vou mudar.
Meu atual está ótimo.
Diego Hatake 12 de março de 2010 02:19
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?
Juliana 12 de março de 2010 06:59
Diego e th3m@d0xt3r, acessem pelo Blogger in Draft (link do começo do post)
Anônimo 12 de março de 2010 08:17
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 *--*
Luz Para os Povos Ministério Apostólicos Sudoeste 12 de março de 2010 08:47
Porque meu blogger ainda naum diponibilizou essa ferramenta como aparece no seu tuto
Ramiro Marques 12 de março de 2010 08:59
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.
Juliana 12 de março de 2010 09:30
Luz, que tal acessar pelo Blogger in Draft? O link está dentro do post.
Juliana 12 de março de 2010 09:34
Ramiro, fique à vontade para linkar o post ;)
Zerfas 12 de março de 2010 10:48
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!
Anônimo 12 de março de 2010 11:27
Bruno De Blasi 12 de março de 2010 13:20
Não podem esquecer também que pode adicionar CSS eu testei até o Hack para tirar a Navbar e pegou
(¯`·._.·[Satoshi_Ash]·._.·´¯) 12 de março de 2010 14:25
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??
Grupo de Casais Shalom 12 de março de 2010 16:45
Obrigadissimo pela dica.
João Moreira 13 de março de 2010 01:14
Já está está atualizado!
Viviane Pereira 13 de março de 2010 10:40
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!
Tânia Regina 13 de março de 2010 17:28
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.
Lu-Bau.Blog 13 de março de 2010 17:42
Interessante, mas como disse antes, ficaria 100% mesmo se pudéssemos colocar as nossas imagens,não somente estas. Ficaria algo mais pessoal.
Fred Veloso 14 de março de 2010 00:51
Porque quando eu crio meu template não aparece a linkbar e obrigado pela dica .
Anônimo 15 de março de 2010 09:53
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.
乃レog do ムレu 15 de março de 2010 10:06
Ajudou mto vlw
conta reserva 15 de março de 2010 13:19
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.
Jiin 15 de março de 2010 23:03
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é+ :)
Juliana 16 de março de 2010 06:43
Vinícius, aprenda desde já: JAMAIS retire créditos de qualquer template. É preciso valorizar o autor da obra. Abraços
Jiin 16 de março de 2010 12:31
Biblioteca Bíblica 16 de março de 2010 16:53
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?
Unknown 17 de março de 2010 00:20
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.
background-image: url(http://www.endereçoDaFoto.com/nomeDaFoto.jpg);
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.
MHMS 17 de março de 2010 15:49
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.
Juliana 17 de março de 2010 18:01
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.
Manolo das Dorgas 17 de março de 2010 22:24
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.
Paulo Roberto [Em Paralello] 18 de março de 2010 10:18
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.
Viviane Pereira 19 de março de 2010 14:56
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.
Pode me dar um help??
pagsbh 19 de março de 2010 19:14
Tão simples que nós da area de TI e Programação tamu tudo Ferrado pra nçao fala outra coisa...
Unknown 19 de março de 2010 19:23
por gostei dessa opição so q no meo blog ñ tem essa opção ñ como eo ativo ela??
Mô 19 de março de 2010 20:58
Adorei as dicas. Com o tutorial ficou facinho fazer... já testei uns 3 modelos!
Anônimo 20 de março de 2010 19:36
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!
Anônimo 22 de março de 2010 04:10
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.
Bruno 23 de março de 2010 16:10
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
Kika 28 de março de 2010 09:55
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?
Alquemyst 31 de março de 2010 04:11
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... ^^
Blog da Karla 4 de abril de 2010 18:01
ADOREI o post. MUITISSIMO útil...te devo a minha vida....ehehehehe
Arte e Design 4 de abril de 2010 22:39
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!!!
Scheid 5 de abril de 2010 23:02
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
Joguz 10 de abril de 2010 19:20
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!
Um novo olhar a cada dia 14 de abril de 2010 14:04
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
C. 16 de abril de 2010 22:15
Muito obrigado pelas dicas! O conteúdo do seu blog é sensacional. (:
Humberto Japa 17 de abril de 2010 11:51
Vlw, criei meu tamplate e fico muito fera
Jéssica Tarciane Chagas 18 de abril de 2010 13:43
mtmtmt obg :}
Italo Beethoven 20 de abril de 2010 22:24
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!
Unknown 2 de maio de 2010 13:43
ai amei a dica , super facil , não tem como errar *-*' , ja arrumei o meu fico lindo s2 , obrigada mesmo *-*'
Raissa Valverde, Natália Edwiges e Victória Matos. 20 de maio de 2010 14:21
o meu não tem a opção 'designer do modelo' , poxa que mole .-.
Bianca 20 de maio de 2010 17:24
OBRIGAAAAAAAAAADAAAAAAAAAAAAAAAAAAAAAA
Estava muito infeliz com a cara xoxa do meu blog, e a minha experiência com html é nula!
Elane Queiroz 1 de junho de 2010 15:05
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?
Viitoria Ferreira 13 de julho de 2010 10:07
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 *_*
josef 19 de julho de 2010 11:17
muito ajudador
Midori 9 de setembro de 2010 16:18
Obrigada pelas dicas, Juliana! Muito bom o post ;)
Thunder-Killer 12 de setembro de 2010 23:28
tem algum jeito de colocar uma imagem do proprio computador como imagem de fundo?
Anônimo 2 de novembro de 2010 00:11
Gostaria de aprender a criar um pelo fireworks e dreamweaver.
Att: Rogèrio
Gabriel Dias 18 de dezembro de 2010 18:09
anonimo de salvador 22 de dezembro de 2010 13:06
ainda sim, ñ dá pra criar um template personalizado com os recursos Blogger. ¬¬ a pessoa temq editar html mesmo!? fala sério