Personalizar o blog na versão para celular + template grátis para baixar - * Blog Elaine Gaspareto *

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

em 28/10/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!!!!
23 comentários via Blogger
comentários via Facebook

23 comentários:

  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
  11. 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?

    ResponderExcluir
  12. Elaine, tudo bem?
    Eu 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?

    ResponderExcluir
    Respostas
    1. Regiane, acho que não é possível usar um template na versão web e outro na versão mobile.
      Pode 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...

      Excluir
  13. Elaine minha Flor amei o layout estou usando mais gotaria quee vc me ensinasse a editar essa coluna onde colocamos as abas???

    ResponderExcluir
    Respostas
    1. Anna, se refere ao menu?
      Se 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?

      Excluir
  14. Oi Elaine, tudo bem?
    Como 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!!

    ResponderExcluir
    Respostas
    1. Deise, quando aplicamos a versão mobile ela é estendida a todo o blog. As páginas ´são adaptadas automaticamente.
      beijosss

      Excluir
  15. Elaine, obrigada por ter respondido!
    No 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!!!

    ResponderExcluir
  16. Olá, eu baixei esse tamplate, mas não consigo editar o menu :( tem como me ajudar? obrigada!

    ResponderExcluir
    Respostas
    1. Milene, num dos posts da série tem a explicação de como editar o menu, creio que ajudará...

      Excluir
    2. Okay, muitissimo obrigada, se não fosse você com certeza meu blog não existiria... Parabens pelo trabalho <3

      Excluir

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…



Visualizações

Contando...

Dias online
Postagens
comentários