Personalizar o blog na versão para celular + template grátis para baixar

em 28 de outubro de 2016


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;}

A parte destacada em azul é o que define a área a ser ocultada, no caso, o link para comentar, ou comment-link.
O comando display: none define que o link para comentar será ocultado na versão mobile do seu blog.
Entendeu?


Compreendido isso vamos ver como personalizar outras áreas do template do blog na versão para celulares:

1- Para retirar o link dos comentários da tela inicial:
.mobile .comment-link{ display: none;}

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.


Copiar todos os códigos


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:

Clique sobre a imagem e visite o blog


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!!!!

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

12 comentários , comente também!

  1. De regresso, estou de visita aos amigos. Espero que a amiga esteja melhor desde a última vez que aqui estive.
    O 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

    ResponderExcluir
  2. 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?

    ResponderExcluir
    Respostas
    1. Hum... eu não sei dizer.
      Eu 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

      Excluir
  3. Ok Elaine, muito obrigada pela ajuda. Seu blog tem me ajudado muito
    Boa semana pra você ;)
    Beijos

    ResponderExcluir
  4. Elaine, como faço para mudar a imagem com o nome do meu blog?? Por favor me ajude

    ResponderExcluir
  5. como faz para tirar um sidebar na versão mobile?

    ResponderExcluir
  6. Boa noite, querida Elaine!
    Meu filho é fera nisso e me ajuda em tudo, ainda bem pois fico boiando, rs...
    Bjm muito fraterno

    ResponderExcluir
  7. Eu ameeeei! parabéns <3 Template muito lindo. Seu blog é maravilhoso *-*
    Beijoos :*

    ResponderExcluir
  8. 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?
    Tentei 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

    ResponderExcluir
  9. 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/
    Agora é 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!

    ResponderExcluir
  10. 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!!! :)

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…