Como fazer um template para o Blogger Parte I
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:
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:
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:
É 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:
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:
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:
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
55 comentários:
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!!!
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
Serei seu fiel aluno, Ariane. :o)
Olha o que eu já fiz, aproveitando outros tutoriais seus:
http://templateparamim.blogspot.com/
Depois do podcast, estou certo que preciso aprender "de verdade" css / html/ java. Aguardando o próximo =)
Aguardo ansiosamente o seu tutorial converter temas do Wordpress para o Blogger.
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
ariane, minha kerida amiga
vlw pelo tutorial. esse e os outros serão realmente esclarecedores e proveitosos ^^
abração
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!
Que ótimo.
Quando estiver com mais tempo, voltarei e verei com calma esse post.
Parabéns pela iniciativa.
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.
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
Oi sou super sua fã!
estou aprendendo um montão com você...
meu blog cada vez está ficando melhor.
Obrigada!
Ótimo curso, hhahahaha
agora estou aprendendo mais a fundo como funciona o blog e não só adivinhando como fiz antes.
bjs
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
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.
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
muito bom o tutorial, parabens :)
Ah birde yazılar türkçe olsa yinede çok teşekkürler
Ola voce poderia converte um template do wordpress ? pra mim to quernedo a um bom tempo add msn builo@hotmail.com
Allô!
Estou precisando falar contigo, mas não encontro teu email...:$ É possível?
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.
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
como q coloca 3 colunas
Acabei de criar meu blog e gostaria de saber, por gentileza, como faço pra incluir templates prontos e onde busco.
Obrigada!
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!
EM FIM, VAMOS LER MAIS PARA APRENDER MAIS, TEM GENTE QUE QUER TUDO NA BOCA!
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
WAW!
Vou criar meu primeiro, agora tenho inspiração e onde conseguir ajuda. Obrigado mesmo!
Ps. O novo visual ficou show. Parabéns!
Parabéns, muito bem explicado até eu consegui e não entendo nada de códigos.
Muito obrigada, foi de grande ajuda.
Um show de aula, fiz até a lição de casa :-)
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!
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
adoraria saber o q é mdl no msn?
obrigado ja sei fazer umas coisinhas
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 |.
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
Parabénssssssssssssssss!!! Demais suas explicações!
Que ótimo tutorial, muito obrigada!
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 ?
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.
Obrigada esse tutorial me ajudo bastate
beijos!!!!!!!!!!!!
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
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!
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.
Muito bom seu tutorial, estou querendo mudar meu blog, mas não quero templates prontos, ja encontrei varios blogs com a mesma cara.
Obrigado por este post.
Eu gostaria de adaptar temas WP para o Sapo.
Poderia dizer-me como?
Gostei vou estudar mais HTML E CSS,depois leio todos esses posts e comento.
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?
Vc me ajudou bastante. Obrigada!
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
adorei
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
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?
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
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.