Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

31 agosto 2008

Como fazer um template para o Blogger Parte I

Preâmbulo
Muita, muita gente mesmo me pergunta como fazer um template para o Blogger e decidi então explicar, passo a passo, o meu método. Que isto fique claro já agora: vou ensinar aqui como eu faço, pois não tenho à menor idéia do método de outros blogueiros que também criam templates. Este tutorial vai ser longo, por isso se dividirá em várias partes. Posteriormente publicarei como faço para converter temas do Wordpress para o Blogger.
Antes de tudo é necessário algum conhecimento em HTML e CSS. Existem diversos tutoriais sobre o assunto; uma rápida pesquisa no Google trará excelentes resultados logo na primeira página. Recomendo o site do Maujor e o Apostilando, onde é possível baixar diversas apostilas sobre os dois temas.
Também que fique claro que não pretendo aqui dar aulas sobre HTML e CSS e as explicações serão dadas da maneira mais simples e acessível possível. Para quem pretende se aprofundar no assunto, procure os mestres nos sites que já indiquei e em outros tantos.
Que programa usar para criar o template?



Na verdade eu não uso programa nenhum. Faço modificações diretamente em um blog de testes e vou visualizando, até que fique ao meu gosto. Para criar ou editar as imagens que utilizo, uso tanto o Photofiltre Studio 09 quanto o Photoshop. Uma opção de programa gratuito é a versão free do Photofiltre, um programa francês que pode ser traduzido para o Português. Após instalar o programa, faça o download deste documento e descompacte-o dentro da pasta do Photofiltre, em Arquivos de Programas. Feito isso, vá até a pasta do Photofiltre e apague o arquivo EN, como mostra a imagem:
photofiltre
Abra o programa e ele estará traduzido para o Português.
Introdução
Tendo escolhido um programa de edição de imagens, crie um blog de testes, onde você fará o seu primeiro template. Eu criei um que vou chamar Aula Template e escolhí para ele o modelo Mínima que é o mais fácil de modificar. Agora vamos conhecer a estrutura da página onde se encontra o meu blog. Clique em Editar HTML. O que você verá é isso:
aula2
O trecho destacado diz ao navegador qual a linguagem de marcação que está sendo utilizada na página (XHTML) e você não deve modificar nada que está contido ali. É o início do nosso documento HTML e a respectiva tag de fechamento no final (role toda a página) é </html>.
Um documento HTML se compõe da seguinte estrutura básica:
<html>
<head>
cabeçalho: aqui está contido o estilo da página - CSS
<head/>
<body>
corpo - aqui está contida a estrutura da página, seus elementos.
</body>
</html>
Note que todas as tags devem ser fechadas respeitando uma hierarquia. O não fechamento de qualquer tag resultará em erro e rejeição da estrutura.
Início do código CSS
O código CSS, que dá estilo à página, começa com : <b:skin><![CDATA[/* e sua tag de fechamento é ]]></b:skin>. Tudo o que estiver contido entre estas duas tags refere-se ao estilo da página (aparência) e não à sua estrutura. Não é possível criar um novo elemento (uma coluna, por exemplo) com CSS. O CSS irá apenas determinar a aparência deste bloco, deste elemento.
Imediatamente após o fechamento da tag do CSS, encontra-se </head>, fechando o cabeçalho da página e imediatamente após </head> está <body>, dando início ao corpo do documento:
aula3
É entre <body> e </body> que se criam os blocos que serão mostrados na página: colunas, menus, etc.
Para começar, vamos nos deter apenas em modificar a aparência da página atual e deixemos para criar novos elementos mais para frente.
Conhecendo o CSS
CSS é uma sigla em inglês para Cascading Style Sheet, que foi traduzido para folha de estilo em cascata e é um mecanismo para adicionar estilo (fontes, cores, etc) para documentos web.
Regra CSS é uma declaração que segue uma linguagem própria e que define como será aplicado estilo a um ou mais elementos HTML . Um conjunto de regras CSS formam uma Folha de Estilos. Uma regra CSS, na sua forma mais simples, compõe-se de três partes: um seletor, uma propriedade e um valor, que devem ser apresentados conforme mostrado abaixo:
seletor { propriedade: valor; }
Seletor: genericamente, é o elemento HTML para o qual a regra será válida (por exemplo: <post>, <body>, <sidebar-wrapper>, <h1>, <p>, etc...);
Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, background, color,etc...).
Valor: é a característica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc...)
Um exemplo prático pode ser encontrado no topo do código do seu template de testes:
body {
background:$bgcolor
Onde body é o seletor (o elemento HTML que receberá o estilo) , background a propriedade deste elemento e $bgcolor o valor
Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves { }. Quando mais de uma propriedade for definida na regra, deve-se usar ponto-e-vírgula para separá-las. Ex:
body{
background: $bgcolor;
margin:0; }
(fonte das informações: Maujor)
No topo da folha de estilos do seu blog de testes você encontrará Variable definitions, que são valores que podem ser modificados no Painel Fontes e Cores do Blogger. Substituindo valores como #ffffff (cor branca) por uma variável ($bgcolor, por exemplo) você poderá alterar esta cor no painel de Fontes e Cores sem precisar mexer no código do template. Quanto mais variáveis forem criadas, maior a facilidade de mudar cores e fontes dos elementos da página, através do painel. Muitas vezes não se consegue mudar a cor ou fonte de um determinado template por que o autor não usou as variáveis, especificando um determinado valor diretamente em uma propriedade. Por exemplo:
body{
background: #ffffff;}
determina que o fundo da página será branco e isto só poderá ser alterado no código.
body{
background: $bgcolor;}
aqui o valor é uma variável e poderá ser alterada no painel do Blogger (Fontes e Cores).
Uma mesma variável pode ser usada em várias propriedades, contanto que se deseje que as cores mudem de maneira idêntica. Por exemplo:
body{
background: $bgcolor;}
sidebar-wrapper{
background: $bgcolor;}
Ou seja, a mesma cor escolhida no painel Fontes e Cores para Background Color será aplicada nos dois casos (fundo da página e coluna lateral igualmente brancos ou verdes, etc.)
Se você prestar atenção nas variáveis do template Mínima, verá que são poucas as opções e se você pretende futuramente mudar as cores do seu template sem precisar tornar a alterar o código, crie tantas variáveis quanto achar interessante.
Note porém que deve ser respeitada a sintaxe para cada tipo de variável:
Variável Cor:
<Variable name="bgcolor" description="Page Background Color"
type="tipo da variável, no caso color" default="#fff" value="#ffffff">
ou seja:
<Variable name="nome da variável - pode ser qualquer nome que escolher, sem espaços" description="descrição que aparecerá no painel Fontes e Cores, pode conter espaços"
type="color" default="valor padrão, funciona na falta de um outro valor fornecido" value="valor da cor fornecida">
Variável Fonte:
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
ou seja:
<Variable name="nome da variável, sem espaços" description="Descrição da variável, pode conter espaços"
type="tipo da variável, no caso, font" default="o mesmo para que se aplica à cores, ou seja, uma fonte padrão" value="fonte escolhida">
Sobre fontes irei me estender mais nos próximos capítulos....
Vamos começar então criando uma nova variável do tipo color, para começar:
<Variable name="cordasidebar" description="Cor do Background da Sidebar"
type="color" default="#fff" value="#CC99FF">
o nome que criei, como exemplo, para esta variável é 'cordasidebar' (um nome qualquer, pois lembre-se que esta variável pode ser utilizada em qualquer propriedade, não apenas no background da sidebar), descrevi-a como Cor do Background da Sidebar (é o que irá aparecer no painel Fontes e Cores), mantive o valor #fff (branco) para default e escolhi o valor hexadecimal #CC99FF que corresponde ao lilás. Cole todo este trecho entre qualquer outra variável de sua página, como mostra a imagem:
aula4
Salve a modificação. Agora vamos ver como esta variável irá se apresentar no Painel. Clique em Fonte e Cores e se você fez tudo certinho até aqui, irá ver a nova variável assim:
aula5
Pois bem, agora que a nossa variável existe, podemos aplicá-la a qualquer propriedade de qualquer seletor onde é possível aplicar cor. Para que a variável funcione é preciso acrescentar o símbolo $ antes dela.
Vou aplicar esta variável na propriedade background de dois seletores, header e sidebar:
#header-wrapper {
width:660px;
background: $cordasidebar;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#sidebar-wrapper {
width: 220px;
background: $cordasidebar;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Note que originalmente, no template Mínima, não existe a propriedade background para nenhum dos dois seletores, é preciso criá-las, como fiz aqui.
Agora que você determinou a variável na propriedade background dos dois seletores, salve e retorne ao painel fontes e cores. Note que tanto o cabeçalho quanto a sidebar estão com a mesma cor de fundo:
aula6
Nota: Para fugir das cores do padrão do painel Fontes e Cores, determine outros valores para sua variável, que podem ser escolhidas em uma tabela como essa. Copie o código html e acrescente em value, como já foi explicado.
Para finalizar esta primeira parte, como lição de casa :-) fica a sugestão de criar variáveis do tipo color para cada um destes seletores: body, outer-wrapper, header, main-wrapper, sidebar-wrapper e footer. Não se esqueça de que a propriedade background deve ser criada para todos estes seletores (menos body, que já contém).
Por hoje é só.

continua em : Como fazer um template para o Blogger II

Artigos Relacionados

56 comentários:

Guilherme disse...

Ola Ariane tudo bem?
Depois que eu ouvi o bloggercast da Juliana virei seu fã, pude perceber o tanto que você dedica aos seus blogs e a satisfação que você tem.
E hoje pela manhã estava procurando um tutorial de como fazer um template, e por pura coincidência você postou o que eu procurava.
Agora é só estudar bastante.

Muito obrigadooo!!!

Anônimo disse...

Oi, adorei este post. ainda hoje de manha me marrei na net desde as 7 da manha a procura de algo do genero mas não encontrei nada de jeito e agora as 11horas venho aqui dar uma olhadela e o que eu encontro!!?? este post maravilhoso..
Adorei imenso. Mt Mt MtMt Mt
abraxu e xau xau

Aparecido José (Crazyseawolf) disse...

Serei seu fiel aluno, Ariane. :o)

Olha o que eu já fiz, aproveitando outros tutoriais seus:

http://templateparamim.blogspot.com/

Unknown disse...

Depois do podcast, estou certo que preciso aprender "de verdade" css / html/ java. Aguardando o próximo =)

Edu disse...

Aguardo ansiosamente o seu tutorial converter temas do Wordpress para o Blogger.

Anônimo disse...

Olá Ariane!
Bom, quero te perdir um help!
(ô coisa dificil é "mexer" com códigos!rsrs)
Bom, minha coluna de sidebar está totalmente desconfigurada o que devo fazer??? Desculpa incomodar, mas o coisa dificil, a coisa tá feia!!rs

Anônimo disse...

ariane, minha kerida amiga

vlw pelo tutorial. esse e os outros serão realmente esclarecedores e proveitosos ^^

abração

foxlose disse...

olá tudo bem estou um pouco confuso sobre alterar meu blog que recursos ou ferramentas preciso utilizar para me tornar um conhecendo de html o que preciso ou seja po onde posso começar?
aguardo um retorno seu
obrigado!

A Casa 49 disse...

Que ótimo.
Quando estiver com mais tempo, voltarei e verei com calma esse post.
Parabéns pela iniciativa.

Tamy disse...

Olá,

Estou fazendo um template para blogger na versão antiga.
Gostaria de saber se tem algum modo de converter um código html, como é usado na versão antiga do blogger, para xml.
Pois gosto dos recursos do novo blogger, mas não gosto do visual dos templates.

Obrigada.

Anônimo disse...

Oi Ariane, tudo bem?
Gostaria de saber, se caso eu deletar o meu blog, eu posso criar um outro blog com o mesmo nome do blog deletado?
Sabe me dar esta informação?
Obrigado!
Um abraço e toda sorte pra você!
Doté Jorge

Michele Flores disse...

Oi sou super sua fã!
estou aprendendo um montão com você...
meu blog cada vez está ficando melhor.
Obrigada!

Planet Web disse...

Ótimo curso, hhahahaha

agora estou aprendendo mais a fundo como funciona o blog e não só adivinhando como fiz antes.

bjs

Macflayre (Esteban) disse...

Realmente os posts são ótimos, vi os links no blog da Aurea, que inclusive está me ajudando em um probleminha..rs
Legal as dias, vou ver todas com mais calma e tentarei criar um templante próprio.
Boa iniciativa, nós precisamos de gente assim para ajudar-nos...rs
Parabéns

Unknown disse...

so para ler, gostaria de te parabenizar pelo seu tutorial, so podia ser uma mulher pq os homens n tem a minima vontade de encinar, pelomenos a maioria, vc manja muito, valew.

Valdeci disse...

Estou começando no mundo dos Blogs e estava com muita dificuldade em mudar as cores dos elementos da página.
Com este tutorial aprendi muita coisa e resolveu meus problemas com relação a isso.
Que bom que na NET pessoas perdem seu tempo com coisas construtivas.
Parabéns pela iniciativa.
Abraços

Caio disse...

muito bom o tutorial, parabens :)

Cevdet disse...

Ah birde yazılar türkçe olsa yinede çok teşekkürler

Rato disse...

Ola voce poderia converte um template do wordpress ? pra mim to quernedo a um bom tempo add msn builo@hotmail.com

Administrador disse...

Allô!

Estou precisando falar contigo, mas não encontro teu email...:$ É possível?

Anônimo disse...

Oi primeiramente queria dizer que gostei muito de suas dicas, eu queria um templete nesse modelo : http://thrashtilldie.blogspot.com/, só que eu queria trocar a imagem de fundo, mas a idéia é esse modelo, alem do efeito da rolagem transparente da página eu gostei do espaço da postagem, só q eu não queria o m:e:t:a:l: coment da página e preferia coluna a esquerda, ou 2 colunas, ficaria muito agradecido se vc pudesse me ensinar a fazer esse tipo de tempalte, ou me emviasse um modelo similar (com a transparencia) ou a´te igual e me ensinasse a editar, esse modelo é bem moderno, por emqunto não vi nada parecido em blogs brasileiros e trocando a imagem de fumdo dele esse modelo pode servir para muita gente e atrair bastante anuncios.
obrigado desde já o meu e-mail é gkempoviki@gmail.com, ficaria muito grato se me retornasse.

Anônimo disse...

Olá
Você pode pedir um favor?
Gostaria de fazer um único modelo para o meu blog.
fazê-lo bonito como modelos.
Posso responder

http://mi-tigger.blogspot.com/

Espero muito anciosa sua resposta.
Chau

Gta Na Rede disse...

como q coloca 3 colunas

Dani Vitor disse...

Acabei de criar meu blog e gostaria de saber, por gentileza, como faço pra incluir templates prontos e onde busco.
Obrigada!

Anônimo disse...

Oi Ariane,
primeiro gostaria lhe parabenizar pelo maravilhoso trabalho que vem fazendo, adoro suas dicas, meu blog ficou maravilhoso graças as suas dicas.
Segundo, quria lhe oferecer um código que a muito tempo venho tentando converter para o blogger/blogspot, mas enfim consegui, e vim aqui passar para você.

Esse é um código simples que envolve linguagem JavaScript e CSS.

Os códigos estão no link abaixo:

http://jscripts.ning.com/id/204360633


Veja como ficou no meu blog
http://www.felipecdsips.blogspot.com

Obrigado,
espero que goste.

Abraços!

Anônimo disse...

EM FIM, VAMOS LER MAIS PARA APRENDER MAIS, TEM GENTE QUE QUER TUDO NA BOCA!

Nanny Nascimento - A Sonhadora disse...

Ariane, vc sabe como eu faço para aplicar transparência no outer-wrapper sem que as colunas fiquem transparentes tmbm?
Se eu aplico o filtro opacity, tudo que está no outer-wrapper fica transparente. Estou procurando alguma solução na internet, mas ainda não achei nada. Agradeço muito se puder me ajudar!
bjks estaladas

Anônimo disse...

WAW!
Vou criar meu primeiro, agora tenho inspiração e onde conseguir ajuda. Obrigado mesmo!

Ps. O novo visual ficou show. Parabéns!

Liza disse...

Parabéns, muito bem explicado até eu consegui e não entendo nada de códigos.
Muito obrigada, foi de grande ajuda.

Liza disse...

Um show de aula, fiz até a lição de casa :-)

Anônimo disse...

Ola Ariane, Primeiro, parabens pelo blog, exelente Template, estou acompanhando seu blog e percebi que esta faltando a parte II do tutorial, ja até encontrei no blog mais nao esta aparecendo para os visitantes junto com os tutoriais (Como fazer um Template), seus tutorias sao de grande ajuda para nos blogeiros.

Abraços!

Patrícia Karina disse...

Oi Ariane,
Achei muito legal as suas dicas.
Gostaria de saber se podes me dar um dica sobre o PhotoFiltre, que baixei, mas não aparece o arquivo translationEN e sendo assim, não possso excluí-lo. Baixei e descompactei o translationBR.
Devo fazer um novo download?
Se puder me ajudar agradeço muito.
Patricia Karina

Unknown disse...

adoraria saber o q é mdl no msn?

Unknown disse...

obrigado ja sei fazer umas coisinhas

Nagato_Naruke disse...

MEU DEUS EU NAO ACRETIDO Q ERA TAO FACIL ASSIM MEXER EM UM HTML, (COMO EU SOU TAO ESTUPIDO :'[) NA MORAL VC EH MEU DEUS DO BLOGGER EU VO APRENDER A MEXER EM HTML EM UM PISCAR MTO OBG MSM KRAM VC EH VIRO MEU AMIGAO!!! ;D

AGORAA PARTE 22222 |.

Lucas disse...

ai tem como vc me mandar um arquivo que tem um template feito?
se tiver me add no meu msn: lucarsan@hotmail.com


valeu aí, espero que me add
quando vc me add coloca a seguinte frase: template blogger aí só é correr pro abraço
bjks

Dani disse...

Parabénssssssssssssssss!!! Demais suas explicações!

Anônimo disse...

Que ótimo tutorial, muito obrigada!

Willian disse...

Muito bom esse tutorial, não sei se esse é o lugar certo mas, na construção de um template pro blogger, eu posso criar todo o layout em um programa ex: Fireworks, e depois inserir os codigos ?

Willian disse...

Muito bom esse tutorial, estou aprendendo HTML já já vou colocar a mão na massa para criar um tema exclusivo para mim, tenho uma duvida, eu posso criar todo o layout do blog e depois inserir os codigos, como é feito em sites.

Sonia Cristina disse...

Obrigada esse tutorial me ajudo bastate
beijos!!!!!!!!!!!!

Paulo Castro disse...

Muito bom seu tutorial, depois vou ler todos porque preciso aprender um pouco mais de html e praticando na customização de um blog da pra melhorar

exxp disse...

Olá adorei seu tutorial...eu estava presisando -.-'
Brigadão

Cleiton e Néia disse...

Ariane, voce é muito fera!! parabens pelo blog e pelo conteúdo!!
seu blog ja está nos favoritos de tudo quanto é browser aqui do meu pc ... rssss!!!
Ja virei fã!!

Valeu demais!!

Fique em paz..
Fiquem com Jesus!

Jardel goiaba disse...

Porra meu, hehehehe o seu site é muito legal, Se não fosse ele e o blog tolls o meu site nunca seria o mesmo, també, tenho que agradescer a google por hospedar ele gratuitamente. obrigado e mil palmas para você! hehehe.

paulo castro disse...

Muito bom seu tutorial, estou querendo mudar meu blog, mas não quero templates prontos, ja encontrei varios blogs com a mesma cara.

Pinguimfaminto disse...

Obrigado por este post.
Eu gostaria de adaptar temas WP para o Sapo.
Poderia dizer-me como?

Marcos disse...

Gostei vou estudar mais HTML E CSS,depois leio todos esses posts e comento.

Dr. Victor, disse...

Boa noite Ariane, tenei criar a varável "cor da side bar", mas o bloger não aceita: "Declaração de variável inválida na skin da página: Este tipo de variável não é válido. Entrada: null"

Só copiei e colei a regra na definição de variáveis, mas não está funcionando. To fazendo algo errado? Pode me ajudar?

Andréia Queiroz disse...

Vc me ajudou bastante. Obrigada!

Anônimo disse...

Declaração de variável inválida na skin da página: Este nome de variável da skin não é válido. Entrada: null o que fazer

Anônimo disse...

adorei

Anônimo disse...

Esse tutorial é exatamente o quê eu estava procurando. A muito queria aprender como contruir template e não tinha a menos ideia de nem por onde começar...
Agora com seu artigo tenho minha "largada" e vou me dedicar bastante!
Obrigado por sua iniciativa.
Já estou te seguindo. muito merecido!!! Abraço

Equipe GYP disse...

oi, eu fiz um template no photoshop (2 colunas) e usei o template Minima como base. mas eu queria fazer Templates que as pessoas pudessem mudar o nome. (não quero que o título fique como o do template minima). quando eu aprendi a criar um template pelo PS, eu aprendi que coloca-se o nome que eu quero e como eu quero (tipo, colar o texto no template). pendei que iria mudar, mas ficou do mesmo jeito quando eu alterei o nome (ficou o nome alterado e o TÍTULO no template). como eu resolvo isso? tem um modo para fazer com que os títulos fiquem com aspecto ligado ão meu template?

Robson disse...

Oi Ariane, parabéns pelo seu post... Ótimo!
acho que vc é uma das unicas pessoas que ensinam realmente como modificar e através deste posts também como criar um blog na raça.
Sou seu fã... você é a mina... rs
Alguns dos demais blogs dizem ensinar como criar um template, porém na verdade eles só mostram como customizar um através do painel de design do Blogger, diferente de você que nos deu uma aula de HTML e CSS.
Continue sempre assim!
Curiosidade: Você fez algum curso de webdesign ou aprendeu tudo na raça mesmo?
Té mais....
:D

Teilor Gustavo disse...

no meu blog uso o firebug, uma extenssao do firefox para achar os fontes de cada imagem, componente, texto etc.. fica a dica

Postar um comentário

Os comentários são moderados.