Conforme eu prometi no primeiro tutorial da Série Como tornar responsivo um template nativo do Blogger (onde aprendemos um passo a passo bem completo de como tornar responsivo um template que use o tema-base Viagem) hoje vou te ensinar como tornar responsivo qualquer template nativo do Blogger!
Vamos fazer isso com os modelos Simples, Marca d'água, Espetacular, Celestial e Janela da imagem, em todas as versões.
E caso seu template seja personalizado usando como base qualquer modelo desses o tutorial também poderá ser aplicado ao seu blog.
Avisos importantes:
✔ Essa série de tutoriais não se aplica aos demais modelos nativos, tipo Visualizações dinâmicas ou os novos templates tipo Soho, Notável, etc pois esses já são responsivos e não aceitam edição.
✔ Essa série de tutoriais também não se aplicam aos blogs personalizados que usem modelos mais antigos do Blogger, como o antigo (#rip) Mínima.
✔ Obviamente, se seu blog já é responsivo esses códigos não se aplicam a ele, ok?
✔ Como eu sempre digo: faça os testes em um blog de testes. Aplique nesse blog de testes seu template, igualzinho está em seu blog real, e aí faça os testes.
Só faça em seu blog real depois de haver dominado os paranauês todos!
✔ O tutorial de hoje não ensinará personalização. Vamos aplicar os códigos que definem a responsividade nos templates sem personalização alguma.
Personalizar é contigo, e pra isso você pode ver as centenas de tutoriais que há aqui no blog:
Como tornar responsivo qualquer template nativo do Blogger- tutorial para todos os modelos
Para começar você precisa saber qual o modelo de seu blog.
Caso ele tenha sido personalizado por outra pessoa terá que perguntar pra essa pessoa qual base ela usou.
Se ele ainda não passou por personalização é só olhar o código-fonte dele e aparecerá, bem no começo, os créditos e o nome do modelo.
Normalmente está em ingles, mas é simples:
Simple- Simples
Etheral- Celestial
Watermark- Marca d'água
Awesome- Espetacular
Travel- Viagem
Também é possível ver qual modelo está em seu blog indo em Tema/Personalizar.
Aparecerá o nome do modelo que está sendo usado no blog.
Modelo identificado, é só usar os códigos correspondentes de cada modelo e fazer exatamente o que cada passo solicita.
Veja os códigos correspondentes de cada modelo:
Gravei a execução do passo a passo em vídeo, pra não restar dúvidas.
Aperta o play e acompanhe a execução em todos os modelos nativos do Blogger:
Aproveita que estamos papeando e se inscreva no canal do blog; ele serve de apoio aos tutoriais do blog e me ajuda muito quando você se inscreve ou compartilha os vídeo-tutoriais!
Finalizando:
Os códigos e explicações do tutorial de hoje são os mais básicos possíveis.
Teste como eu fiz no vídeo, em todos os modelos, seja curioso, curiosa, fuce mesmo, aprenda.
Aprender, gente querida, não ocupa espaço e faz a gente crescer!
No próximo post da Série Como tornar responsivo um template nativo do Blogger eu vou entrar no assunto emocionante e divertido das media queries.
Aí você aprenderá o básico de como usa-las para ajustar coisas como botão Leia mais (caso seu blog use), postagens relacionadas e como personalizar detalhes do template, além de um pouco de teoria.
E teremos template free pra baixar! Uma base limpa, clean e já responsiva!
Caso você tenha perguntas diga nos comentários aqui no blog e eu ajudo assim que possível.
Até o próximo tutorial, que será em breve!
Vou dar uma olhada. Preciso aprender umas coisas rsrsr, aliás, muita coisa.
ResponderExcluirObrigada.
Beijos.
blogjoturquezzamundial
blogaustraliacomcappuccino.
Jô, veja as séries mais recentes, tem passo a passo inclusive em vídeo, creio que ajudarão :)
Excluirbjsss
Eu peguei um template seu personalizado com o tema contempo. Será que funciona?
ResponderExcluirSil, eu nunca disponibilizei nada usando Contempo...
ExcluirSe for o modelo que está em seu blog agora ele usa a base Viagem, então sim, pode usar os códigos ou usar os mais completos que disponibilizei no tutorial anterior à este.
bjssss
Elaine
ResponderExcluirVocê é incrível,já consigo até mexer no Html,coisa que achava impossível,graças aos seus tutoriais que são verdadeiras aulas.Vou esperar pela personalização do Tema Simples,que você já adiantou que vai ensinar.Depois faço essa parte de tornar o blog responsivo.
Beijos,boa tarde!
Maria, na verdade eu não vou ensinar não, como eu disse no texto a personalização é por conta da pessoa.
ExcluirSe der tempo eu vou disponibilizar uma base já personalizada, talvez usando o Simples, mas ainda não sei ao certo...
Mas seguindo as dicas e tutoriais do blog você conseguirá personalizar sem problema...
beijossss
Adoro muito seus tutos, sempre me ajudam demais. Esse foi mais um que deu super-certo. Sou muito grata!
ResponderExcluirTay, fico feliz!!!
Excluirbeijossss
Você arrasa! <3 Mas eu acho que algo mudou no Blogger, minha barra lateral ficava oculta pelo celular e agora não fica mais. Nos testes web da tudo certinho. Penso que pode ser com apenas alguns modelos, o meu é o Espetacular. Fiquei triste :(
ResponderExcluirParabéns pelo seu trabalho! Beijos blogtanamoda.com
Adorei o tutorial, Elaine!
ResponderExcluirMuito bem explicado. Deu tudo certo!
Obrigada!
só conseguir achar o codigo no meu blog de testes , mas no meu blog original não consegui achar. :( o código e diferente e fiquei com medo de mexer.
ResponderExcluirOlá Elaine, primeiramente sou grande fã do seu trabalho. Leio tudo e estou sempre presente no seu blog. Está nos meus favoritos.
ResponderExcluirEu consegui fazer o seu tutorial no blog de testes com o menu no lado direito. Porém quando modifico o layout para o lado esquerdo. A responsividade para de funcionar.
Por gentileza, você poderia me dar uma luz?
Gratidão!
Faz assim: no código que define a responsividade, o que começa com < style type='text/css' que é o último código de cada modelo, aquele que vc cola acima de < / head > sabe?
Excluirtroque a palavra right por left em todas as vezes que ela aparecer.
Isso resolverá o problema, creio eu...
Muito bom! Simples e eficaz.
ResponderExcluirOLá. Fiz e deu certinho. Mas como a gente tem que marcar lá em tema p não mostrar otimizado para celular, o Page Speed volta a por a pontuação em 19 e quando marco p otimizado foi a 96. Só que quando é otimizado, não parece o menu acima e nem a barra lateral. O que poderia fazer em relação a a essa modificação contar, realmente,m como otimizada para dispositivos móveis? Na prática deu certinho, mas na pontuação do Google, não.
ResponderExcluirSe vc usar a personalização nativa do Blogger a pontuação é maior justamente porque:
Excluira) os posts ficam resumidos na home;
b) não há elementos de página a exibir, coisas como menu, slide, e sidebar.
Aí é claro que menos elementos=mais rapidez de carregamento.
A opção seria usar condicionais do Blogger para definir o que exibir e o que ocultar na versão para celular.
Mas seguindo a lógica, ao escolher exibir os tais elementos, o peso aparecerá.
Enfim, é optar, não tem jeito, infelizmente.
se quiser experimentar aqui no blog tem tutorial que fala sobre as condicionais do Blogger e seu uso e também tem tutorial sobre personalizar a versão mobile Friendly, a versão para celular.
Mas o peso, esse não tem jeito, sempre será maior na mesma proporção que escolher elementos de página para exibir...
Elaine o meu blog é "espetacular", mas não encontra o
ResponderExcluirQual trecho vc não localiza?
ExcluirOi elaine, tudo bem? Adoro seu trabalho e te sigo nas redes sociais!
ResponderExcluirQueria saber se esse tutorial serve para seus templates gratuitos que você disponibilizou
A maioria dos meus temas já sao responsivos 😀
ExcluirOla Quero agradecer e parabenizar. Estava com dificuldades para tornar o meu blguer responsivo e através de implantação destes códigos em minutos ele tornou mobile no google, apenas acrecentei já que não encontrei ..
ResponderExcluirMuito Obrigado... funcionou perfeitamente.
ResponderExcluir