Pular para o conteúdo principal

Personalizar o blog na versão para celular ,para mostrar as gadgets como por exemplo : conteúdos mais visitados,pesquisar assunto,caixa de curtir do Facebook,banners,etc.

Olá pessoal !

A nossa missão de hoje é botar pra funcionar o que a gente quer : pegar as gadget do blog,blogger pra funcionar na versão mobile,ou seja, na versão para celular.

Antes de  personalizar o blog na versão para celular é necessário cumprir uns pré-requisitos como, verificar se o template tem a atualização que permite personalizar a versão para celular e preparar o template para receber personalizações.

Para verificar se o template tem a atualização que permite personalizar a versão para celular, vamos  fazer o seguinte :

- Ir no painel administrativo e clicar em Modelo. A seguir clique na roda dentada conforme está na foto abaixo. Nas duas opções que aparecem clique em : - Sim,mostrar modelo em aparelhos celulares e onde aparece Escolher modelo para celular ,escolha Personalizar 

           

Para preparar o template para receber personalizações, vamos  fazer o seguinte :

- Ainda em Modelo, clique em editar HTML  e dentro da caixa do código fonte aperte as teclas Ctrl+F para abrir uma caixinha de pesquisa e digite <body. Depois tecle Enter



Agora, vamos achar essa linha : <body expr:class='"loading" + data:blog.mobileClass'> . 

 Achou ? Então tá legal,vamos para a etapa 1

Como alguns templates antigos não possuem esse comando,se você achar somente <body>,troque pelo código completo que mostrei acima e salve.


Esse é um tutorial bem tranquilo que só vai precisar de três ETAPAS para personalizar :

ETAPA 1

Fazer o login no seu blog, ir em Layout e clicar em editar,na Gadget que a gente quer que apareça na versão para celular . Quando você clicar em editar vai aparecer uma janela igual a essa que está na foto. 



ETAPA 2

Agora vamos pegar a ID do seu gadget que está nessa janela. É  através da ID,que vamos  encontrar a linha de código  e colocar o código mobile='yes' antes do title.

A ID encontramos de duas maneiras : 

a) você clica com o botão direito do mouse na linha https://www.blogger.com/rearrange?blogIDxxxxxx mais ou menos igual como aquela da foto anterior e vai na opção selecionar tudo, pois quando selecionar você vai ver que a ultima palavra daquela linha ,ou começa com a letra maiúscula ou está toda em letra maiúscula como por exemplo : HTML1,HTML2,HTML9,CustomSearch1. 

b) Outra maneira é você dar duplo clique e copiar toda linha. Depois cola em qualquer lugar para ver qual a ID da gadget. Eu abri uma nova guia no navegador e colei 


ETAPA FINAL

Nesta etapa só precisamos saber a ID da gadget que vamos colocar na versão para celular e seguir os passos.

O que essa ID faz ?

Quando a gente entra em Modelo,editar HTML e clica em ir para um widget ,vemos a ID de cada gadget. O que vamos fazer é simplesmente clicar na ID da gadget que queremos colocar na versão para celular e na linha de código acrescentar o código mobile='yes' antes da palavra title.


Exemplo

Eu quero colocar a caixinha de pesquisa na versão mobile

ANTES de pegar a ID da gadget pesquisar que é a CustomSearch1, e colocar o mobile='yes' na sua linha de código  ,a minha versão para celular estava assim :



E a linha de código de CustomSearch1  estava assim :
  


DEPOIS

Quando fui em Modelo,editar HTML e cliquei em CustomSearch1 e coloquei o código mobile='yes' antes de title ficou assim :

Linha de código



Visualização


O procedimento é o mesmo para todos os elementos da página :

1 - Entre em Layout e localize a ID do gadget ;
2 -  Localizar esse ID no código fonte do template ;
3 - Inserir o código mobile='yes' antes de title e depois clique em salvar.

 A versão mobile do meu blog tem dois banners a caixinha de curtir do facebook e a caixinha de pesquisar
Marcadores:

Comentários

  1. Luana Cruz19/04/2017, 21:26

    Olá. Eu queria saber como mudar a cor dos títulos das postagens na versão mobile, vc pode me ajudar? Agradeço desde já.

    ResponderExcluir

Postar um comentário

Related Posts Plugin for WordPress, Blogger...

Postagens mais visitadas deste blog

Exercícios resolvidos de provas sobre espaço amostral e probabilidade de um evento

Esta lista de exercícios , é resultado de um estudo amplo com o objetivo de descomplicar a análise de espaço amostral e probabilidade de eventos sem utilizar aqueles métodos como Diagrama em árvore e tabela de dupla entrada (produto cartesiano) que muitos professores utilizam para dificultar um pouco o entendimento de probabilidade. Os exercícios estão divididos em 3 seções : Seção de exercícios Básicos ,Seção de exercícios com um certo grau de dificuldade e uma seção sobre prova teste ou simulado. Definições Espaço amostral (S)  É o espaço de amostragem de todos os elementos de um experimento probabilístico . Por exemplo: no lançamento de uma moeda,os elementos pertencentes a uma moeda, são : a cara e a coroa, somente é possível obter ou cara ou coroa e o nosso espaço amostral será : S ={ cara, coroa }, um outro exemplo bacana é o lançamento de um dado que pegando o mesmo raciocino , todos os elementos pertencentes a um determinado dado, são os números { 1,2,3,...
52 comentários
Leia mais

Exercícios resolvidos de provas sobre média ,mediana e moda

A média , mediana e moda,são medidas de posição ou medidas de tendencia central que fazem parte de um ramo muito importante da estatística, que é a estatística descritiva . A Estatística Descritiva permite-nos resumir, descrever e compreender os dados de uma distribuição usando medidas de tendência central (média, mediana e moda) e medidas de dispersão (valores mínimo e máximo, desvio padrão e variância). Muitas vezes , a média ,ela é um pouco injusta com a gente sabe porquê ? Imagine o seguinte : Estamos em uma festa com duas pessoas(Pedro e Niko ) e só tem 2 bifes . Só que acontece o seguinte : o pedro por ser guloso vai escondido e come os 2 bifes...Em media ,cada um deles comeu um bife porque a média diz-nos que havia um bife para cada pessoa mas não nos diz como é que os bifes foram distribuídos. Esta é uma das razões pelas quais os dados estatísticos que se apresentam em relatórios de investigação terem frequentemente duas ou mais medidas descritivas associadas. Por ...
40 comentários
Leia mais

Tudo sobre integrais definidas e exercícios resolvidos com comentários

Definição A Integral definida é um tipo de integral que tem um valor inicial que denominamos de limite inferior e um valor final que chamamos de limite superior . Resumidamente a integral definida entre a e b é a integral indefinida em b menos a integral indefinida em a . Teorema fundamental do cálculo Muitas vezes , a gente ouve falar do teorema fundamental do cálculo e tem dificuldade de entender, porque nem todo professor tem paciência de explicar todo esse trem , mas vamos nessa ! O teorema fundamental do cálculo é a base das duas operações centrais do cálculo, diferenciação e integração, que são inversas uma da outra . Isto quer dizer que se uma função contínua é primeiramente integrada e depois diferenciada (ou vice-versa), volta-se na função original.  Exemplo :Seja f(x)=2x, Calcule a sua integral  e derive o  resultado para chegar a função original 2x. Sabendo que a constante c é um número , vamos derivar o resultado para chegar no funçã...
15 comentários
Leia mais

Exercícios resolvidos de provas com comentários sobre distribuição binomial

"Em nossas loucas tentativas, renunciamos ao que somos pelo que esperamos ser".William Shakespeare Antes de entrar no assunto principal vamos entender o que é fatorial de um número que tem como simbolo o n! Na matemática, o fatorial de um número natural n, representado por n!, é o produto de todos os inteiros positivos menores ou iguais a n. A notação n! foi introduzida por Christian Kramp em 1808. Exemplo: Calcule o fatorial dos números 0,1,2,3,4 e 5 . Solução 0! = 1 1! = 1 2! = 2.1 = 2 3! = 3.2.1 = 6 4! = 4.3.2.1 = 24 5! = 5.4.3.2.1 = 120. Observação: O zero não entra nesta definição, pois se multiplicarmos todo o produto de n até 1 por zero teremos zero como resultado. O que é uma distribuição binomial? Em estatística, a distribuição binomial é a distribuição de probabilidade do número de sucessos numa sequência de n tentativas. O que devemos saber sobre essa distribuição? Vamos entender as caraterísticas de um experimento binomial Um exper...
15 comentários
Leia mais

Exercícios resolvidos de provas sobre derivadas aplicando as regras de diferenciação

Para calcular a derivada de uma função que seja derivável, em determinado ponto do seu domínio, podemos sempre usar a definição. Mas, dependendo da função, isto pode significar bastante trabalho e pode ser evitado usando regras de diferenciação, evitando assim complicados cálculos de limites. Em que consistem as regras de derivação ? Resumidamente podemos afirmar que se o cálculo de derivadas usando a definição é meio complexo e gasta mais tempo , usando as regras de diferenciação as coisas ficam um pouco mais tranquilas devido a rapidez na execução e obtenção dos resultados. Entretanto, aplicar as regras de derivação consiste em usar estes conhecimentos para, a partir das derivadas de funções mais simples, determinar as derivadas de funções que delas se obtêm por meio das operações. Simbologia A derivada de uma função f, na variável x , é uma função, que representamos por f ' . Regras a seguir : Sejam f e g funções diferenciáveis :  Está regra afirma que...
3 comentários
Leia mais

Exercícios resolvidos sobre cálculo de área em integrais Definidas

O teorema de integral definida para o cálculo de área , diz que : Se  f e g são funções definidas e contínuas em [a, b] e tais que  f (x) ≥ g(x),  . Então a área da região A limitada pelos gráficos de f(x) e g(x) e pelas retas x = a e x = b é dada por: Graficamente  Seção de exercícios  Determine a área limitada pelas curvas  Exercício 1 Solução Primeiro ,vamos calcular as raízes (pontos de interseção) igualando as duas funções : Sempre que temos uma situação como essa, devemos colocar o expoente 2 nas duas funções.   Agora, vamos ter que entender o gráfico de cada função envolvida Representando graficamente as curvas, teremos : Calculando a área  Exercício 2 Solução Vamos calcular as raízes (pontos de interseção) igualando as duas funções : Chegamos numa equação do segundo grau , e vamos utilizar a fórmula de Bhaskara para encontrar as raízes ou pontos de interseção (x 1 e x 2 ). ...
26 comentários
Leia mais