.png)
Não consegui pensar num título mais compacto para descrever esse tutorial. Mas é um tutorial base de como deixar as páginas estáticas "parecidas" com as do meu blog.
Página estática, são todas as páginas no seu blog que não são postagens cronológicas do blog. Tudo o que se cria na aba de páginas do blogger, são páginas estáticas, em inglês, static pages. A gente vai usar o inglês para o código. E caso queira achar mais informações e tutoriais, recomendo usar o termo em inglês também.
Tem só uns 3 anos que eu codifico meu blog por hobbie, nunca busquei aprender apropriadamente, através de cursos ou fontes especializadas. Tudo o que aprendi foi no método: tentativa e erro. Meus códigos não são limpos, nem organizados, mas vou tentar fazer um tutorial aqui a nível de registro mesmo. Pois a fonte original do código que eu usei, foi apagada... O link que eu tinha salvo nos favoritos, não abre mais... Triste fim. Então, vim aqui eternizar esse tutorial que me é muito útil e virou a identidade desse blog: páginas personalizadas.
Passo a passo do tutorial
Nota: não recomendo esse tutorial pra quem não tenha noção de codificação ou pra quem ta começando a mexer nisso, pois vão ser necessários noções básicas e alguns ajustes. Só recomendo, se você tiver muito disposto a quebrar cabeça.
Faça o backup do seu blog no momento atual, antes de fazer qualquer modificação.
No menu lateral do blogger, vá em Tema > Personalizar > Editar HTML.
Use o ctrl + f e busque por </b:template-skin>,
Embaixo desse código, coloque o código abaixo:
Fim do tutorial. Quando você criar uma página nova, já vai ta funcionando, conforme imagem abaixo.
.png)
As personalizações em relação a cor do fundo, tamanho da área de postagem, estilo de títulos e demais elementos, devem ser feitos dentro da página estática, na visualização em HTML (imagem abaixo).
.png)
Caso você queria excluir essa área de postagem branca, recomendo que coloque no código da página, algo como: .post-outer{background: none;}.
Após fazer as modificação em HTML (dentro da página), não será mais possível editar a página usando a visualização "escrever". Toda edição deve ser feita diretamente no código da página, sempre atualizando e acessando a página (pois ás vezes, a visualização teste, não mostra os códigos rodando apropriadamente).
Lembrando que o código dentro da página tem que vir todo organizado, o que é <style></style> (ou seja, onde entra CSS) e o que é <body> (onde entra o HMTL). Quem tiver interesse em ler o código das minhas páginas, para ter uma noção, é só usar ctrl+u e pesquisar por: post-body entry-content. O que tiver abaixo, é o código da página.
Lembrando que isso é uma gambiarra. A plataforma do blogger não foi feita para esse formato de website, pois é uma plataforma de blog, são formatos diferentes. Eu faço isso aqui, porque não quero migrar para outra plataforma.
Dica: salve esse tipo de código específico em um bloco de notas no seu computador, devidamente identificado com o nome do tutorial, para caso seja necessário recorrer a ele algum dia, ou até repassar.
Comentários adicionais sobre o código
Se você prestar atenção no código, são elementos presentes no corpo padrão de qualquer layout, e o código desativa a exibição desses elementos somente nas páginas estáticas. Se o seu blog tiver algo a mais, como uma imagem, uma barra lateral com um código específico igual o meu, você precisa acrescentar esse elemento no código, antes do {display: none}. Ou ainda, se o código do seu blog usar nomes diferentes para alguns elementos, você precisa descobrir e colocar no código do tutorial. Por exemplo, no meu blog, a área de postagem se chama "post-outer" e alguns elementos da barra lateral tem um nome próprio como "#HTML3", conforme mostro na imagem abaixo:
.png){kind=small}
No código do meu blog tem mais elementos do que precisa, porque eu to sempre mexendo no layout, então eu já deixo habilitado pra caso eu precise, por exemplo "#cortina-topo", é pra quando eu uso cortininha no blog e afins. Eu tbm já deixo configurado os elementos de "post" e do "post-outer". Quem quiser aprender como funciona, eu recomendo começar copiando códigos de outras pessoas, para fins de estudo e ir adaptando para o que você quer, em cores e formatos.
Eu gosto de abrir páginas testes aqui no blog e também uso o Codepen.
Se você fizer o passo a passo do tutorial acima e não der certo, recomendo que você copie o código e coloque também dentro da página em questão. Muito provavelmente, vai ser preciso fazer alguns ajustes e testes. Eu considero esse tutorial muito difícil, por causa das incompatibilidades que podem ocorrer. Demorei muito tempo pra conseguir fazer rodar direito nas minhas páginas e até hoje acho alguns probleminhas.
Se tiver alguém mais habilidoso que eu e quiser dar sugestões ou correções, eu estou aceitando.
Comentários gerais sobre o recurso
Quando eu comecei a visitar sites do neocities, notei que as páginas eram distintas entre si, enquanto aqui no blog (devido a proposta da plataforma que é diferente da proposta no neocities) as páginas estáticas só repetem o layout do blog em si.
O que eu fiz foi usar um comando em código que desabilitam alguns elementos do layout, como a barra lareal (sidebar), o rodapé (footer), o cabeçalho (header) e assim por diante. Todo elemento que eu coloco no layout do blog, precisa ser desabilitado das páginas estáticas. Então eu tive que aprender o nome de vários pedaços do blog, que são facilmente adicionados na aba de "layout", mas que no código tem um nome próprio.
O pulo do gato é que existe o código que fica no corpo do blog, junto dos outros códigos gerais. E existe o código dentro de cada página nova que eu crio. Pelo menos eu prefiro deixar os códigos específicos de personalização dentro da página individualmente, pois acho que me acostumei assim. Enquanto o código base, fica junto dos outros códigos do blog num geral.
Um dia me perguntaram como eu mantenho o blog, ou se é muito pesado. Sinceramente, nunca pensei sobre isso e não costuma travar ou demorar para as páginas carregarem, até porque é tudo puramente HTML+CSS, o mais básico dos básicos. Então acho que por isso que meu blog ainda não colapsou k.
Fim.
marcadores:
Escrito por
LANA!!!!! ya lo probé y funcionó :D! en mi caso,tuve que agregar un montón de otras variables de mi blog, pero el que pueda uno hacerlo una sola vez y de ahi solo preocuparse del estilo de cada página ahorra un montón de tiempo y energia. Muchas gracias por el tutorial <3! Porfin podré hacer páginas lindas como en neocities wiii!!
ResponderExcluirQue bom que funcionou!!! É muuuito divertido ficar brincando com as páginas. Só presta atenção quando for mudar o layout do blog em si, porque as vezes desconfigura um pouco as páginas.
ExcluirDisponha, vou aguardar ansiosa as suas atualizações!
Fazia um booom tempo que não via uma postagem de tutorial e lana, parabéns!
ResponderExcluirMuito obrigada! Fiquei me sentindo agora!
ExcluirLana você andou lendo meus pensamentos??? Eu não tenho muito conhecimento de código, eu só tenho um blog e um sonhos, mas esses dias eu tava querendo muito brincar com código e mexer na página do blogroll, tentar fazer algo criativo nessa página, mas não fazia ideia de como começar, essa publicação foi o start da ideia xD Muito obrigada e por favor compartilhe mais dicas de código para noob.
ResponderExcluirGarota do 330
Pois seus problemas se acabaram-se! Aproveite bastante, vou adorar ver os processos e resultados! Qualquer coisa, manda mensagem que a gente se ajuda.
ExcluirSempre me perguntei como que tu fazia isso, até já tentei fuçar o código fonte mas obviamente não tenho conhecimento suficiente pra isso. Confesso que fingia que era alguma magia secreta hehehe acho super legal navegar pelas páginas do teu blog! São super legais! Parabéns, deve ter dado bastante trabalho ^-^
ResponderExcluirEu achei que fosse mais fácil de ler meu código fonte, mas quando fui testar, é bem mais complicado... Achei que fosse mais limpo igual o neocities, mas enfim. Obrigada! Dá trabalho sim, mas faz parte, é muito gostosinho de montar tbm!
ExcluirLANAAAAA!! meu deus, justo o que eu queria pra poder eventualmente testar no bloguinho também 👀 hihihi. eu adoro suas páginas estáticas, vai ser divertido fazer umas bagunças em código também. obrigada por compartilhar, você é +qd+!!!! beijocas!!
ResponderExcluirTeste, espero que dê certo, qualquer coisa me da um retorno. Xero!
Excluirprimeiramente, o novo layout fica lindo demais, arrasou como sempre. segundo que eu sempre tive dúvida de como vc fazia um layout pra cada página e finalmente tive essa dúvida respondida, vou até salvar esse tutorial pra caso um dia eu precise! obrigada!
ResponderExcluirbeijinhos, nanaview 💌
Muchas gracias por el tutorial, me sirvió bastante. Por ahora lo tengo en mi blog de manera muy sencilla.
ResponderExcluirHasta luego, y muchas gracias!