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:


    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!!!!
    37 comentários via Blogger
    comentários via Facebook

    37 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
      Respostas
      1. Oi você conseguiu colocar o nome nos menus e links de sub menus??? NAO SEI COMO FAÇO ISSO ME AJUDA POR FAVOR

        Excluir
    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
    17. Amiga Elaine, os meus parabéns pelo site. Sem dúvida, um dos melhores, se não mesmo o melhor, do género.
      Gostaria 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.

      ResponderExcluir
      Respostas
      1. 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.
        Att.

        Excluir
    18. 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 :(

      ResponderExcluir
    19. Oiiii Elaine, você é meu anjo!!
      E 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?

      ResponderExcluir
      Respostas
      1. 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...

        Excluir
    20. Oi 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!

      ResponderExcluir
    21. Posso 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!

      ResponderExcluir
      Respostas
      1. Sim, pode usar.
        Sobre 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...

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

        Excluir
      3. Não, ele não é responsivo, ele é adaptado para a versão mobile, eu explico isso na série.
        Também na série tem a explicação de como fazer os gadgtes aparecerem, no segundo post :)

        Excluir
      4. 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

        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