Formulário de contato

Nome

E-mail *

Mensagem *

24 de fev de 2016

Mostrar widgets de blogs do Blogger na visualização de dispositivosmóveis

Para glória do Senhor Jesus!
Vou ensinar hoje como fazer para mostrar widgets de blogs do Blogger na visualização de dispositivos móveis. É simples, apenas requer atenção, e, claro, você tem que ter o widget normalmente instalado no seu blog. Pode ser qualquer um (pesquisa, marcadores, arquivo, etc.).


Vamos lá! Para começar, faça backup de segurança do seu template (COMO FAZER).

Agora, vá em "Modelo" e clique em "Editar HTML". Procure pelo widget que você quer mostrar na visualização mobile. Vou usar o widget de marcadores como exemplo.

Você achará o widget de marcadores na primeira linha mais ou menos assim:

<b:widget id='Label1' locked='false' title='TÍTULO DO WIDGET' type='Label'>

Adicione:

mobile='yes'

Ficará assim:

<b:widget id='Label1' locked='false' mobile='yes' title='TÍTULO DO WIDGET' type='Label'>

Fazendo apenas isso esse widget aparecerá também na visualização mobile.

Se você, porém, criou o widget para aparecer somente na versão mobile, terá que fazer umas adições a mais.

No lugar de 'yes' poderia ser colocado simplesmente 'only'. Acontece que apenas com essa substituição, o widget não apareceria também na seção "Layout" do painel Blogger, onde fazemos algumas modificações no widget quando necessárias. O que queremos é que apenas não mostre na visualização para computadores, mas continue aparecendo normalmente na seção "Layout".

Para isso, faça o seguinte. Expanda o widget para ver o código dele por inteiro. Seguindo nosso exemplo de marcadores, será mais ou menos assim:

<b:widget id='Label1' locked='false' mobile='yes' title='Título-do-widget' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2>
<data:title/>
</h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>
(
<data:label.count/>
)
</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>
(
<data:label.count/>
)
</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


ABAIXO da linha marcada de vermelho (<b:includable id='main'>), cole o seguinte:

<b:if cond='data:blog.isMobile'>

Agora, ACIMA da linha marcada de verde (</b:includable>), cole:

<b:else/>
</b:if>


Pronto. Agora salve.

NOTA: No WordPress.Com os templates sempre mostram os widgets do blog na visualização do celular e não é necessário mexer em nada ;) .

É isso!
Beijoka!
Gratidão
Author Image

Meri Pellens
Cristã, mãe e blogueira com necessidades físicas especiais. Aprendiz e amante viciada de xadrez, busco viver cada dia como único, valorizando todos os momentos com olhos fitos no Senhor. Amo trabalhar com blogs e artes digitais.

Nenhum comentário:

Postar um comentário