Você está acompanhando a Série Personalizar o blog na versão para celular?
Não???
Então se liga nos posts já publicados:
Série Como personalizar o blog na versão para celular
Personalizar o blog na versão para celular: Mostrar gadgets e botões de compartilhar
Personalizar o blog na versão para celular: Menu responsivo
Hoje vamos ao 4º post da série, e nele nós vamos focar em uma área pouco explorada dos templates nativos do Blogger: a área Mobile.
Dependendo do modelo escolhido essa área pode apresentar algumas diferenças mas basicamente os comandos funcionam do mesmo jeito em qualquer modelo nativo do Design de Modelo.
Claro, precisa paciência e testar sempre.
Em geral, quando vemos o template do blog pelo celular, aparece assim (claro, com seu modelo):
Ele mostra o link para comentários, a data, o tamanho da fonte do texto segue o tamanho definido na versão web, etc...
No tutorial de hoje vou ensinar como retirar os comentários, retirar o fundo caso tenha, aumentar o tamanho da fonte do texto e outros truques simples.
Vamos?
Então vamos!
Personalizando a área Mobile do blog
A maneira de modificar a aparência do blog na versão mobile é bem simples.
Tudo o que você desejar modificar deve ser precedido do comando .mobile{ e ser inserido dentro da área Mobile do seu template.
Ela começa assim:
/* Mobile
----------------------------------------------- */
Tudo o que quiser acrescentar pode ser colocado abaixo disso.
Vou exemplificar:
Para retirar o link dos comentários da tela inicial insira dentro da área Mobile esse comando:
.mobile .comment-link{ display: none;}
Compreendido isso vamos ver como personalizar outras áreas do template do blog na versão para celulares:
2- Para aumentar o tamanho da fonte do texto da postagem na página interna do post:
.mobile .post-body {font-size: 20px;}
O valor 20px você altera para mais ou para menos conforme desejar.
3- Para retirar retirar a data:
.mobile .date-header span {display: none;}
4- Para retirar o fundo caso tenha imagem ou queira trocar a cor:
.mobile .body-fauxcolumn-outer {background: #fff;}
O valor #fff você altera para a cor que desejar. Nesse caso #fff define que o fundo será branco.
Como você vê são várias opções de personalização.
Vá mexendo, descobrindo o que funciona em seu blog, o que não funciona...
Então vamos rever o que já aprendemos até aqui:
Inserir gadgets e botões de compartilhamento na versão para celular
Colocar um menu responsivo no blog que funcione no celular
Personalizar a área mobile do blog, alterando fontes, elementos, etc...
Já dá pra se divertir, né?
Olha nosso template Adeline como é visto no teste mobile friendly:
Presente para você -Template Adeline grátis para baixar
Agora, como prometi, segue o link para você baixar e usar o Template Adeline que usamos como base para essa minissérie de tutoriais Personalizar o blog na versão para celular.
Além do que ensinei nessa minissérie acrescentei:
1- os botões especiais de compartilhar;
2- as postagens relacionadas ao final dos posts;
3- o slide de postagens recentes;
4- personalizei as Postagens mais vistas;
5- personalizei os títulos dos gadgets;
6- personalizei as tags;
7- inseri a paginação numerada igual à minha.
Veja como ele ficou:
Na pasta zipada que você vai baixar estão:
O código-fonte do template, exatamente como ele está agora.
O código da caixa de pesquisa.
O código da paginação numerada.
O código do slide. Lembre de colocar o endereço de seu blog onde está o endereço do meu, ok?
Caso queira retirar o slide basta não inserir o código dele e apagar no código-fonte o trecho que começa com /* Slide de postagens recentes */ e termina com /* Final do Slide de postagens recentes */
Também está na pasta a imagem que usei no cabeçalho, já no tamanho certo, a mesma imagem em tamanho extra grande.
Se quiser usar outra imagem fique à vontade.
Amei! Quero baixar e usar!
Para baixar o seu pack você precisa apenas clicar no botão verde abaixo, escolher em qual rede social deseja compartilhar o link e pronto! É só baixar no site MediaFire, descompactar o arquivo e usar como desejar.
Só tem 2 regras:
1- Não pode, em hipótese alguma, retirar ou modificar os créditos do rodapé.
2- Não pode usar como base pra vender dizendo que foi você que fez.
Pode alterar cores, fontes, imagem do cabeçalho, imagem de fundo... fique à vontade!
É tudo alterado direto pelo painel no Blogger, na aba Modelo/Personalizar/Avançado.
As personalizações do meu (como inserir os links) estão explicadas nos posts da Série Personalizar o blog na versão para celular.
Olha o mesmo template em tons mais "masculinos":
Viu como é possível personalizar e torna-lo bem diferente?
Concorda com as regrinhas?
Então baixe seu template e use à vontade em seu blog!
Muito obrigada por acompanhar a série e baixar o template que modificamos durante os tutoriais!
Espero que seja útil e que você se divirta!
Enjoy!!!!
De regresso, estou de visita aos amigos. Espero que a amiga esteja melhor desde a última vez que aqui estive.
ResponderExcluirO post parece-me interessante, mas como sabe eu sou um zero à esquerda com estas coisas e nunca me atreveria a mexer no Smartphone sob pena de dar cabo dele.
Um abraço e bom Domingo
Oi Elaine. Sei que não tem a ver com o conteúdo do post, mas eu queria saber se posso gerar uma política de privacidade naqueles sites que geram automaticamente, ou não é seguro fazer assim?
ResponderExcluirHum... eu não sei dizer.
ExcluirEu não faria, acho melhor você escrever a sua política, abrangendo o que você realmente pratica e quer manter...
Até pode usar como base, mas eu faria com minhas palavras. Aliás foi assim que fiz :)
bjsssss
Ok Elaine, muito obrigada pela ajuda. Seu blog tem me ajudado muito
ResponderExcluirBoa semana pra você ;)
Beijos
Elaine, como faço para mudar a imagem com o nome do meu blog?? Por favor me ajude
ResponderExcluircomo faz para tirar um sidebar na versão mobile?
ResponderExcluirBoa noite, querida Elaine!
ResponderExcluirMeu filho é fera nisso e me ajuda em tudo, ainda bem pois fico boiando, rs...
Bjm muito fraterno
Eu ameeeei! parabéns <3 Template muito lindo. Seu blog é maravilhoso *-*
ResponderExcluirBeijoos :*
Olá, Elaine! Tudo bem! Gostei muito desse template, quero usá-lo! Ele vale para a versão desktop também, né? Não só para versão mobile, certo?
ResponderExcluirTentei um template seu antes, o Flowers, mas não consegui configurar a imagem do cabeçalho. Vamos ver se acerto esse!
Obrigada e sucesso sempre!
Ruth
Sim, vale sim para a versão desktop!
Excluirbjssss
Elaine, minha querida, como vão as coisas? Espero que tudo esteja correndo bem e que sua mãe já esteja melhor! Baixei o modelo... amei tudo! Era justamente o que eu estava procurando!!! \0/ \0/
ResponderExcluirAgora é encontrar tempo para fazer as modificações... (#morri)... tenho tanta coisa inserida no HTML do blog, que só de pensar em copiar e depois adicionar tudo de novo... já entro em pane elétrica e seca (#morri de novo) kkkkk...
Mas muito obrigada por disponibilizar este modelo! Depois volto aqui para te contar como ficou! Obrigada de novo! Um grande abraço!
Voltei! Deu tuuuudo certo, Elaine!!! Ainda bem que só uso os comando e as dicas que vc disponibiliza, então ficou fácil, porque já tinha tudo salvo nos meus favoritos! Pensei que ia dar bem mais trabalho... mas não deu! Obrigada de novo! Ficou uma belezura o meu humilde bloguinho!!! :)
ResponderExcluirOi você conseguiu colocar o nome nos menus e links de sub menus??? NAO SEI COMO FAÇO ISSO ME AJUDA POR FAVOR
ExcluirStéphanie, aqui tem um tutorial que ensina como editar qualquer menu:
Excluirhttp://www.elainegaspareto.com/2017/09/como-editar-um-menu-com-abas-e-sub-abas.html
olá, eu adorei a série porém o template do meu blog está todo desorganizado e é muito primitivo com isso eu n consegui aplicar as suas aulas nele, gostaria de saber se esse template que vc disponibilizou já está com as configurações para o uso dele no mobile?
ResponderExcluirElaine, tudo bem?
ResponderExcluirEu amo ler seus posts... me ajuda muito, obrigada :)
Gostaria de saber se posso usar o template disponibilizado só para acessar a versão móbile, pq eu fiz um tanto de alterações no meu template do blog para a versão desktope e quero deixar como está, mas a versão móbile eu gostaria de usar o seu template. Tem como? usá-lo só para a versão móbile?
Regiane, acho que não é possível usar um template na versão web e outro na versão mobile.
ExcluirPode tentar mas não recomendo.
A melhor dica que dou é fazer em seu template as alterações que fui explicando ao longo dessa série, que culminou no template desse post...
Elaine minha Flor amei o layout estou usando mais gotaria quee vc me ensinasse a editar essa coluna onde colocamos as abas???
ResponderExcluirAnna, se refere ao menu?
ExcluirSe for tem alguns posts aqui no blog que ensinam como editar mas basicamente é um menu de link onde você pode colocar os links que desejar.
Seria isso?
Oi Elaine, tudo bem?
ResponderExcluirComo sempre seus tutoriais são fantásticos.
Agora tenho uma dúvida, caso o blog tenha páginas estáticas personalizadas (consta somente informações referente aquela página sem rodapé, comentários e entre outros) é possível que, aplicar a versão mobile nestas páginas, ou é necessário que as páginas estáticas esteja como a página de postagem?
Forte abraço!!
Deise, quando aplicamos a versão mobile ela é estendida a todo o blog. As páginas ´são adaptadas automaticamente.
Excluirbeijosss
Elaine, obrigada por ter respondido!
ResponderExcluirNo caso do meu blog, não houve essa adaptação. Porém, descobri como fazê-lo, inseri o código do mobile no código da página estática, de tal modo, houve a compatibilidade sem alterar o blog (versão desktop).
Obrigada!!! Abraço :)
Tudo de bom!!!
Olá, eu baixei esse tamplate, mas não consigo editar o menu :( tem como me ajudar? obrigada!
ResponderExcluirMilene, num dos posts da série tem a explicação de como editar o menu, creio que ajudará...
ExcluirOkay, muitissimo obrigada, se não fosse você com certeza meu blog não existiria... Parabens pelo trabalho <3
ExcluirAmiga Elaine, os meus parabéns pelo site. Sem dúvida, um dos melhores, se não mesmo o melhor, do género.
ResponderExcluirGostaria de saber se na área Mobile é possível colocar visível a foto e texto de apresentação dos autores do blog, já que aparecem no modo computador mas não aparecem no modo celular.
Muito obrigado.
Armindo, tem jeito sim. Veja o segundo post da série (está linkado no começo deste post). Lá tem o passo a passo de como fazer aparecer na versão mobile os elementos de página que desejar.
ExcluirAtt.
SOCORRO,Eu baixo o template tudo certinho...aí quando eu vou colocar,diz que esse arquivo tem elementos XML e eu não consigo DE JEITO NENHUM Colocar nenhum template no meu blog :( Me ajuda POR FAVOOR :(
ResponderExcluirLisse, como você está tentando colocar?
ExcluirOiiii Elaine, você é meu anjo!!
ResponderExcluirE se eu quiser colocar postagens relacionada
Botões de compartilhar (não os que são nativos do Blogger eles são bem feios)
Marcadores
como eu faço?
Aí não tem jeito, teria que ser um template responsivo... na versão mobile a área dos posts não pode ser personalizada com item extras...
ExcluirOi Elaine, tudo bem? AMEI esse template, era exatamente o que eu procurava e precisava! Mas me diz uma coisa, eu tenho gadgets html que eu demorei pra conseguir colocar no antigo template que uso/usava e quero continuar com eles nesse seu template; eles vão sumir?? E outra, todos os gadgets (tanto em html) vão aparecer na versão mobile??? Até os gadgets html antigos?? Não quero mudar muitas coisas no template pois ele esta do jeito perfeito pra mim, e confio muito no teu trabalho. Aguardo respostas, beijos!
ResponderExcluirPosso usar a imagem que você usa nesse template (essa que está junto com o arquivo) como capa da página no facebook? A unica coisa que vou mudar na foto é acrescentar o nome do blog. Quero deixar a capa do face igual o blog. Aguardo ansiosamente a resposta, abraços!
ResponderExcluirSim, pode usar.
ExcluirSobre a pergunta anterior eu não sei dizer, teria que testar. Em geral, se o gadget for inserido via layout, a troca de template pode salvar tudo, mas via html eu não sei, depende muito de cada caso...
Eu consegui recolocar eles,tá tudo lindo e perfeito agora, porém os gadgets não mostram na versão mobile,achei que como o layout é responsivo eles já se apareciam automaticamente, o que eu faço pra eles aparecerem?
ExcluirNão, ele não é responsivo, ele é adaptado para a versão mobile, eu explico isso na série.
ExcluirTambém na série tem a explicação de como fazer os gadgtes aparecerem, no segundo post :)
Mulher agora tu me confundiu kkkkkkkk eu JURAVA que ela era responsivo, aliás, qual seria a diferença? Pois pra mim ele é responsivo kkkk não entendo dessas coisas ainda
ExcluirOlá Elaine, não estou conseguindo visualizar o botão verde que você mencionou para baixar o template. Você pode compartilhar o link?
ResponderExcluirComo eu removo esses botões de compartilhamento? Eu já coloquei outro mais bonito, mas só depois dei conta que já tinha esse, e quero removê-lo.
ResponderExcluirwww.eudelirico.com.br
Maísa, localize no código fonte esse trecho:
ExcluirCompartilhe este post nas redes sociais
Daí, logo acima dele localize < left > e apague tudo, de < left > até o penúltimo que achar antes de < div class= ' post-footer-line post-footer-line-2 ' >
OII, adorei esse Layout, mais não consigo mudar a cor do masculino nem do feminino. :(
ResponderExcluir.
Oi Elaine, eu gostaria de um auxílio seu, please. Uso o template Noelle que na versão celular o botão LEIA O POST aparece desalinhado quando o título do post é um pouco longo e fica feio, daí a decisão de tirar o slide da exibição via celular. Ao ver o tutorial deste slide, observei que a etapa final para inserir o mesmo (HTML/ javascript) não aparece e deste modo não posso (pelo que entendi) localizar o ID para alterar. Imaginava que sendo responsivo o template tudo se encaixava ok. Tenho me policiado para não colocar títulos grandes, mas mesmo assim... Qual destes tutoriais de blog/celular devo usar? (https://reginabofim.blogspot.com). Se quiser também tirar o slide do blog devo apagar o código né (tô meio enjoada dele...).
ResponderExcluirRegina, esses tutoriais não se aplicam ao temas responsivos, somente para temas mobile friendly...
ExcluirPara retirar o slide de seu template veja o tutorial de como instala-lo:
https://www.elainegaspareto.com/2017/12/slide-de-posts-recentes-responsivo.html
Aí é só ir retirando os códigos ao invés de adicionar :)
excelente conteudo, obrigado por sua ajuda. Mas preciso de um apoio. Quando acesso meu blog pelo mobile ele fica em tamanho pequeno, tenho que aumentar manualmente com os dedos pra poder le, quais seriam os códigos que faz o blogger ficar no tamanho certo na tela do celular assim que a pessoa acessar?
ResponderExcluirNesse caso o que vc precisa é de um template responsivo.
ExcluirOlhe ali no menu na aba Séries de tutoriais, tem uma série que fiz que ensina como tornar responsivo um template nativo do Blogger.
Creio que ajudará.