Olá, como vão? Aqui quem escreve é a Nigohyu, administradora do Naturally Edits e também capista no Wonderful Designs. Vocês devem estar se perguntando por que os reuni aqui (risos photoshopeiros). Devo introduzir essa iniciativa contando um pouco sobre tudo.
Tudo começou quando ingressei pela primeira vez no Wonderful Designs em 20xx (os xx representam minha incapacidade de lembrar o ano exato e minha preguiça de procurar). Não faz tanto tempo assim, sério. Alguns meses depois, entrei para o falecido Incredible Design e até cheguei a criar dois layouts para ele. Também fiz parte do Demolir Text, e criei um projeto próprio chamado Stump Shop, que só durou uma entrega, pois não estava com a cabeça para aquilo haha. A proposta era boa, mas o hype era mínimo. Então, a administradora fechou o Incredible (a pedido da fundadora) e me convidou a fazer parte do Naturally. Como a vida costuma seguir seu curso, ela saiu, outras pessoas também, e agora sou eu que cuido de tudo. Eu não sei como funcionavam os projetos anteriores a 2017 (em termos internos), mas já fazia layouts naquela época. A questão é que a estrutura que eu fazia era totalmente diferente dos projetos de designs (você pode ver alguns aqui). Quando comecei a encomendar layouts no WD, deram-me um modelo para seguir, mas não durou muito até eu pedir permissão para criar uma base própria, já que não estava confortável com aquela.
Com o tempo, surgiram novos projetos, e com isso novas dúvidas. Não tinha (e ainda não tenho) muito tempo, mas estou aqui para fazer uma série de tutoriais para vocês, novos projetos, que pretendem ingressar na criação de layouts para tais iniciativas.
É importante enfatizar que, como mencionei, já mexo no código do Blogger há um bom tempo, desde que entrei na blogosfera (2009/10, embora não saiba exatamente quando comecei com o web design). Os layouts que criava tinham um intuito e público bem diferentes, já que geralmente eram temas para blogs pessoais, onde tinha mais liberdade para criar estruturas variadas. Layouts para projetos de entrega de capas de fanfics e afins parecem seguir um padrão, então é por esse caminho que vou seguir.
Hoje no naturally eu não utilizo mais a hospedagem do blogger, mas para ESTE blog que estou, eu usarei. Note que o layout está simples, e ficará assim.
Guia
1. Introdução ao HTML e à Estrutura do Blogger
- O que é HTML?
- Como o HTML se integra à estrutura do Blogger
- Visão geral do painel do Blogger: onde encontrar e editar o código HTML do seu template
2. Estrutura Padrão em Projetos
3. Customizando o Cabeçalho do seu Blog
- Adicionando um logotipo ou imagem de fundo
- Modificando o título e a descrição do blog
- Inserindo menus de navegação personalizados
4. Criando e Estilizando Postagens e Páginas
- Como formatar postagens com HTML básico
- Inserindo e alinhando imagens e vídeos
- Estilos para textos: parágrafos, cabeçalhos, listas, etc.
- Dicas para criar páginas de conteúdo, como "Sobre", "Regras", e "Staff"
5. Personalizando a Barra Lateral (Sidebar)
- Adicionando widgets personalizados: pesquisa, categorias, tags, etc.
- Como editar e reorganizar widgets no Blogger
- Estilizando a barra lateral para combinar com o design do seu blog
6. Introdução ao CSS: Estilizando o Seu Blog
- O que é CSS e como ele funciona no Blogger
- Adicionando e editando folhas de estilo no Blogger
- Personalizando fontes, cores e tamanhos de elementos
7. Criando Layouts Responsivos
- O que é um layout responsivo e por que ele é importante
- Como fazer ajustes no HTML e CSS para tornar o blog responsivo
- Testando o layout em diferentes dispositivos e resoluções
8. Ajustando o Rodapé e Outras Áreas do Blog
- Como personalizar o rodapé: créditos, links, e widgets adicionais
- Editando a área de comentários e postagens relacionadas
- Inserindo ícones de redes sociais e outros links úteis
9. Dicas de SEO Básico para o Blogger
- Otimizando o HTML para SEO
- Como usar meta tags, títulos e descrições de maneira eficaz
- Inserindo dados estruturados para melhorar a visibilidade do blog
10. Resolvendo Problemas Comuns no Blogger
- Erros de HTML e como corrigi-los
- Problemas com widgets e scripts
- Como restaurar o layout original se algo der errado
11. Recursos Adicionais e Ferramentas Úteis
- Ferramentas online para validar e melhorar seu HTML/CSS
- Templates gratuitos e pagos para o Blogger
- Comunidades e fóruns para tirar dúvidas e encontrar inspiração