Se você, assim como eu, gosta de brincar com HTML e CSS e acaba fazendo temas sem saber necessariamente em que plataforma eles serão usados (Neocities, Blogger, WordPress etc.), criando apenas um arquivo index.html, talvez já tenha sentido uma leve frustração por fazer um design bacana e depois não conseguir passá-lo para o Blogger.
Felizmente, a internet é muito amiga e com isso consegui aprender a converter o tema para que ele funcione na plataforma adequadamente. Hoje estou aqui para passar esse conhecimento adiante. E o melhor: sem precisar mudar para os códigos clássicos do Blogger, tendo acesso ao editor de widgets e tudo que tem direito!
Este tutorial só serve se você já possui um modelo pronto, com o HTML e CSS já prontinhos! A ideia aqui é só adaptar o modelo para os padrões do Blogger, então se você não tem um modelo pronto, infelizmente não será nesse tutorial que você aprenderá a fazer um tema do zero.
Vou tentar explicar da forma mais simples possível. Espero que gostem! ♡
Um adendo!
Esse tutorial serve para temas simples, em que as postagens aparecem diretamente na página inicial. Caso você deseje converter um tema que mostra os posts em formato de grade com uma imagem em destaque, por exemplo, é necessário ter conhecimentos de javascript que não serão abordados aqui.
Passo 1: Declarando o documento XML
Além do HTML e do CSS, o Blogger utiliza uma linguagem chamada XML para a construção de seus temas. Por isso, para iniciar a criação de um tema para o Blogger, é necessário declarar que se trata de um documento XML. Para isso, você pode abrir o editor de sua preferência e colar o seguinte código:
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html><html lang='en-US' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>Pronto! Na primeira linha, você declarou que se trata de um documento XML e, além disso, na segunda linha, declarou que também é um documento HTML. É confuso, mas acredite, é só não mexer nisso que tá tudo certo! Já a terceira linha é importante para fazer o tema funcionar no Blogger, então acaba sendo indispensável também.
Essas três primeiras linhas precisam ser as três primeiras linhas do seu código sem exceção!
Você também pode perceber que na terceira linha tem uma declaração de que o código é em inglês. Apesar do blog estar em português, nós não vamos mudar isso, pois o código dos widgets do Blogger é em inglês mesmo.
Vale ressaltar também que as duas últimas linhas do código também devem ser, obrigatoriamente, o seguinte:
</body>
</html>Passo 2: Adicionando metadados no cabeçalho do código
Aqui o código já começa a ficar um pouco mais com cara de Blogger, sendo dados importantes para que o tema funcione bem. Dependendo do que for mexido, o próprio Blogger nem permite que o código seja salvo no editor, então tome muito cuidado nessa parte!
O código a seguir vai na parte do cabeçalho do código, ou seja, entre as tags <head>. Se quiser, apenas copie e cole o seguinte em seu código que não tem erro.
<head>
<b:include data='blog' name='all-head-content' />
<title><data:blog.pageTitle/></title>
<meta content='width=device-width, initial-scale=1' name='viewport' />
<b:skin>
<![CDATA[
/* código CSS aqui */
]]>
</b:skin>
</head>Se quiser, você pode alterar o que tem dentro da tag <title>. O que consta ali inicialmente irá importar automaticamente o nome da página, conforme está no Blogger. Porém, se você quiser colocar um título diferente, é só apagar o <data:blog.pageTitle> e escrever o que quiser ali!
Tenha em mente, no entanto, que esse nome ficará em todas as páginas do seu blog, inclusive em páginas de post e páginas internas.
Como identificado já no código, dentro de <b:skin> é onde consta o CSS do seu tema. Apesar de sempre usarmos a tag <style> dentro de um arquivo HTML normal, aqui isso não é necessário, bastando apenas substituir o /* código CSS aqui */ pelo seu CSS.
Passo 3: Cabeçalho do blog
Hora de movermos para a sessão <body>, em que fica o conteúdo do tema efetivamente.
Para começar, localize em seu modelo onde fica o cabeçalho do seu tema. Idealmente, ele estará entre tags <header>, se você estiver trabalhando com a sintaxe adequada do HTML. No entanto, cada caso é um caso de seu tema pode ser diferente.
Dentro da área onde fica o header, você deve colar o seguinte código:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
</b:section>Não é necessário fazer nenuma alteração no código. Ele irá automáticamente importar o widget Cabeçalho do Blogger. No entanto, esse passo é completamente opcional, então caso você não goste do cabeçalho em forma de widget do Blogger, você pode usar o cabeçalho estático que você desenvolveu no arquivo HTML.
Passo 4: Sessão de posts
Aqui não tem segredo nenhum. Basta achar no seu código a sessão onde ficarão os posts e colar o seguinte código:
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts Section' type='Blog' />
</b:section>Passo 5: Sidebar ou área de widgets
Se o seu blog possui uma sidebar ou uma área de widgets, é só incluir este código:
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
</b:section>Aqui é importante ressaltar algumas coisas.
Caso seu blog possua apenas uma sidebar ou apenas uma área de widgets, pode-se deixar o código como está. Já caso o tema tenha mais de uma área com widgets, é necessário fazer uma pequena alteração: para cada área de widget, você precisará mudar o id da seção.
Ou seja, se você possui um sidebar no lado esquerdo e uma no direito, primeiro você procura no código onde fica a sidebar esquerda, cola o código acima e substitui id='sidebar' por id='sidebar-left'. Já no lugar da sidebar direita, você faz a mesma coisa: cola o código e substitui id='sidebar' por id='sidebar-right'.
O id, na realidade, pode ter o nome que você quiser, então não precisa necessariamente conter a palavra sidebar. Aqui eu coloquei assim só pra situar melhor, mas você pode fazer do jeito que você achar mais fácil.
Você também pode alterar o class='sidebar' por qualquer outra classe que você desejar e que esteja de acordo com o seu CSS.
Passo 6: Salvar e ver as alterações ao vivo no blog
Feito tudo isso, é hora de salvar e ver ao vivo no blog como está o tema.
É muito provável que, num primeiro momento, algumas coisas estejam meio desconfiguradas, como por exemplo o estilo dos títulos dos widgets podem não corresponder ao estilo que você determinou no seu CSS. O mesmo pode acontecer com o título da postagem, rodapé da postagem etc.
Para consertar isso, é necessário adaptar o seu CSS para o código que o Blogger usa dentro dos seus widgets.
Passo 7: Adaptando o CSS
A seguir, mostro quais são as principais classes usadas dentro dos widgets do próprio Blogger. Basta você substituir os nomes das classes pelos nomes que eu indicar e a partir disso é pra tudo ir se encaixando no lugar.
Essa lista não está exatamente completa, mas é um bom começo para você conseguir deixar o blog com a carinha que você idealizou no documento HTML simples.
Caso tenha alguma coisa que você deseja modificar que não consta aqui, você também sempre pode abrir o blog no seu navegador de preferência, clicar com o botão direito na sessão que deseja descobrir o código e então clicar em Inspecionar.
A partir daí você já é livre para brincar com o código como quiser.
Lista de classes do Blogger
- Título do widget: .widget h2
- Corpo do widget: .widget-content
- Título do post: h3.post-title
- Cabeçalho da data: h2.date-header
- Corpo da postagem: .post-body
- Link de "leia mais": .jump-link
- Rodapé da postagem: .post-footer
- Link dos comentários: .post-link
- Link do feed: .feed-links
- Paginação do blog: #blog-pager
- Comentários: .comments
Espero que o tutorial tenha sido proveitoso. Se você tiver alguma dúvida, pode postar um comentário que eu tento responder assim que possível!
Vale lembrar que não sou desenvolvedora profissional e, portanto, posso não ter a resposta para tudo. Estou aqui apenas repassando o meu conhecimento para que mais pessoas que tem como hobby brincar com seus blogs possam fazer o mesmo.
Beijinhos e até a próxima!
Nenhum comentário
Postar um comentário