Personalizar o blog na versão para celular- mostrar gadgets e botões de compartilhar

em 6 de outubro de 2016

Personalizar o blog na versão para celular- mostrar gadgets e botões de compartilhar

Alô, pessoas!
No tutorial de hoje vamos começar a personalizar a versão para celular do blog.
Expliquei sobre a minissérie aqui, relembre:


Como eu disse no post inicial não se trata de tornar o template responsivo, isso fica para uma próxima série que pretendo fazer.
Os tutoriais que vamos publicar, começando hoje, visam personalizar a versão mobile nativa do Blogger, que é muito eficiente e leve, tanto que é a que eu uso, atualmente.

Para seguir o tutorial eu recomendo vivamente que você faça todo o procedimento em um blog de testes e somente depois de aprender tudo faça em seu blog "oficial".
Isso dará mais segurança e tranquilidade para mexer sem medo, ok?
Blog de testes pronto? Vamos começar então!


Preparando o blog para personalizar a versão para celular


Antes de mais nada vamos aprender o básico: como preparar o template para receber as personalizações que faremos.
Faça o seguinte: vá ao painel administrativo de seu blog e clique na aba Modelo.
A seguir clique na roda dentada que aparece abaixo de celular.
Assim:
modelo de blog para celular

Nas opções que aparecerem escolha:
→ Sim, mostrar modelo para celular em aparelhos celulares.
E onde  aparece Escolher modelo para celular escolha Personalizar.
Salve.


Agora vamos checar se seu template tem a atualização que permite personalizar a versão mobile.
Ainda em Modelo clique em Editar HTML e dentro da caixa do código-fonte tecle Ctrl+F.
Na barra de busca que aparecer digite <body
Sim, exatamente assim, sem fechar a tag.
Tecle Enter para localizar.
Você precisará achar isso:



Se achar somente <body> troque pelo código completo que mostrei acima e salve.
Isso é importante pois templates mais antigos podem não possuir esse comando.
Feita a alteração, salve.



Escolhendo o que exibir na versão mobile


Agora olhe seu blog, este de testes que estamos mexendo, claro.
Sim, vá lá e olhe.
Selecione quais gadgets quer que apareçam na versão mobile.

Eu, no meu template de exemplo, defini que queria mostrar no celular a caixa de pesquisa, o box do Instagram e a caixa de curtir do Facebook.
Então, escolha os gadgets que deseja exibir.
Agora clique para editar um deles.

Vamos supor que seja a caixa para curtir sua fanpage, como no meu exemplo.
Ao clicar para editar você verá o ID do seu gadget, assim (claro que com o seu ID):


Localizou o ID do gadget que deseja exibir na versão mobile?
Então vá ao Modelo do template, clique em Editar HTML e na aba Ir para um widget vá ao elemento de página que deseja.
No caso do meu exemplo, HTML1, que é o ID da minha caixa de curtir.
Assim:


Agora preste atenção para a mágica!
Quando você localizar o ID do seu gadget verá algo assim (claro que com seu ID e nome do gadget):

<b:widget id='HTML1' locked='false' title='Curta a gente no Facebook' type='HTML' version='1' visible='true'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
  </b:widget>

Este é o código padrão de um widget no Blogger.
Para exibir esse elemento na versão mobile faça o seguinte:
Dê um pequeno espaço antes da palavra title e cole isso:
 mobile='yes'


Salve.

Com a modificação ficará assim:

<b:widget id='HTML1' locked='false' mobile='yes' title='Curta a gente no Facebook' type='HTML' version='1' visible='true'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
  </b:widget>


Viu em vermelho o acréscimo que fiz?
É isso que fará com que o elemento de página que você escolheu seja exibido na versão para celular de seu blog.

Faça o mesmo procedimento em todos os elementos de página que desejar, sempre do mesmo jeito:

  1. localize no gadget o ID dele;
  2. localize esse ID no código-fonte do template;
  3. insira antes de title o comando mobile='yes';
  4. e salve.


Colocar os botões de compartilhar na versão mobile


ATENÇÃO
Essa parte do tutorial só é útil para quem usa botões de compartilhar personalizados.
Se você usa os nativos do Blogger não faça essa parte, ok?


Agora que você aprendeu como mostrar no celular os elementos de página que desejar vou te ensinar como exibir apenas no celular o elemento que quiser.
Vou dar um exemplo prático:

No meu template de teste eu inseri botões de compartilhar personalizados.
São lindos, iguais os que eu uso mas não aparecem na versão mobile.
E eu não quero mostrar no blog versão para web os botões de compartilhar nativos do Blogger, prefiro os personalizados.
Mas quero mostrar a versão mobile dos botões nativos no celular.
Como fazer isso?
Simples!


Inserir botões de compartilhar na versão para celular do blog


Para começar vá ao Layout de seu blog, esse que estamos mexendo, clique em Editar abaixo de Postagens no blog e deixe marcada a opção Mostrar botões de compartilhamento.
Salve.

Agora vá ao Modelo de seu blog, clique em Editar HTML e tecle Ctrl+F e na barra de pesquisa que aparecer cole isso:

Copiar o código

Tecle enter para localizar.
Achou?
Agora cole isso antes do começo do código:



E digite </b:if> após o fechamento da div.

Ficará assim:

<b:if cond='data:blog.isMobile'><div class='post-share-buttons goog-inline-block'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
 </div> </b:if>


Trata-se de uma condicional. Ela define que o elemento share-buttons aparecerá apenas na versão para celular do blog.
Legal, né?
No blog de códigos tem ambos os códigos, com e sem a condicional.


Então, o tutorial de hoje mostrou:

  1. Como ativar a versão mobile personalizada no blog;
  2. Como identificar o ID dos elementos de página do blog;
  3. Como exibir os elementos de página escolhidos na versão mobile;
  4. Como mostrar botões de compartilhar na versão mobile.


No próximo tutorial vou ensinar como inserir e programar o menu responsivo  que está em meu Template Adeline.


Ah, uma dica esperta:


Para não perder nenhum artigo você pode:

→ Seguir o blog via gadget Seguidores: basta clicar em Seguir na lateral do blog e concluir o processo; as atualizações aparecerão em seu painel do Blogger assim que forem publicadas.

→ Pode curtir nossa fanpage: todos os posts têm seu link enviados pra lá no momento em que são postados. Basta clicar em Curtir!



→ Cadastre seu email e receba a atualização direto nele, assim que for postada.

Digite seu endereço de email:





Falando no Template Adeline, olha como ele está ficando (acesse também pelo celular, pra ver tudo o que fizemos até aqui).

Clique para visitar e conhecer


Ao final da série vou disponibiliza-lo para você baixar e usar, já com todos os recursos e personalizações.

Ficou feliz?
Então me ajude, curta, compartilhe e recomende esse post.
É só o que preciso pra ficar bem feliz e caprichar ainda mais nos próximos tutoriais e séries!
Posso contar contigo?

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.

14 comentários , comente também!

  1. Elaine amei as dicas !!!!!!
    Você sempre arrasa!
    Beijo
    http://www.simplesedoce.com.br/

    ResponderExcluir
  2. Amei as dicas, mas com o script que bloqueia a copia do código, ficou ruim de reproduzir :( Queria muito fazer esse tutorial bem mais rápido, mas vou demorar bastante. Vou tirar um dia de divulgação do meu blog, para poder reproduzir esse tutorial, claro que, tendo que digitar os códigos. Bjs Elaine!

    www.blogdodeivy.blogspot.com

    ResponderExcluir
    Respostas
    1. Deivyson, os códigos necessários estão na página de códigos. Clique no botão rosa Copiar o código e a página abrirá.
      bjssss

      Excluir
    2. Ok! Obrigado Elaine, não tinha reparado nele, minha visão não é muito boa.

      Excluir
  3. Elaine, eu troquei a template do meu blog e agora ele fica assim: http://prntscr.com/cs6jfe
    Tem como me ajudar a consertar isso?

    http://jobsonreistransformice.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Jobson, infelizmente não pois seu template é baixado da net e esses templates possuem códigos diferentes entre si...

      Excluir
  4. quando eu fecho a div quickedit o template não aceita, fica em vermelho... ajudaaa

    ResponderExcluir
    Respostas
    1. Victor, mil desculpas, não tem div de fechamento, é só inserir o comando mobile='yes'
      Eu errei, sorry...

      Excluir
  5. Boa tarde Elaine, a minha barra de pesquisa é uma que você ensinou aqui no blog e o cód é de uma linha só, assim como o box do face, quando coloco mobile='yes'e salvo, aparece uma mensagem em vermelho Erro ao analisar XML, linha X, coluna X: Element type "b:widget" must be followed by either attribute specifications, ">" or "/>". Se puder me dizer o que fiz de errado, obrigada bjsss

    ResponderExcluir
    Respostas
    1. Ana, não tenho como saber.
      Minha sugestão é que você releia o tutorial e se certifique de estar colocando o comando no lugar exato, como expliquei...

      Excluir
  6. Olá, estou com uma dificuldade um pouco maior, meu template é responsivo, porem está todo desconfigurado. A versão de celular está com largura errada, titulo errado e assim por diante, porem a versão para computador está ótima para mim.
    Não consigo encontrar os códigos de ajuste no celular dentro do HTML :(

    ResponderExcluir
    Respostas
    1. Brenda, como seu template é baixado da internet não tenho como ajudar pois os códigos são bem específicos e diferentes.
      Sem contar que, como mencionei, pode haver erros e bugs nele.
      Infelizmente acontece...

      Excluir
  7. Não consegui. Que pena! Estou tentando a manhã inteira.

    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…