A arte da vida. Apon HP


Obrigado por sua visita. Boa leitura!


Clicando na imagem, você lê uma postagem sorteada pelo sistema.



Pensata. Apon HP - Pense nisso...>

Nossos escritos mais recentes:



domingo, 20 de abril de 2014

Duas maneiras para exibir ou ocultar gadgets com um clique ou toque





Expandir/recolher gadgets da sidebar pode dar um visual menos poluído, acelerar o carregamento e tornar mais agradável a navegação em seu blog/site. Confira aqui.


Imagens voando.


Os gadgets oferecem uma serie de recursos extras ao seu blog. Mas, quando os temos em quantidade, deixam o visual um tanto desarrumado e o carregamento das páginas mais lento. Vamos aqui ver duas maneiras de driblar esses problemas, permitindo que os widgets sejam ocultados ou exibidos conforme deseje o visitante e tornando a aparência da sidebar mais limpa, também contribuindo para acelerar um pouco mais a abertura de suas postagens.


O primeiro método é extremamente fácil e muito simples de implementar, mas só se aplica aos elementos do tipo (HTML/Java Script). No código abaixo, você vai substituir a frase: Aqui vai seu HTML. Pelo código do seu gadget. Salve e pronto.


<div class="divspoiler">
<img src="http://m.aponarte.com.br/gifs/seta.gif" alt="Clique para exibir/ocultar." onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') {
this.parentNode.nextSibling.childNodes[0].style.display = ''; } else {
this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" /
> </div><div><div class="spoiler" style="display: none;">
Aqui vai seu HTML
</div></div>


Observação: Usamos nesse exemplo a gif de uma seta, se preferir, basta trocar o endereço da imagem pela URL de outra figura que deseje.


O segundo método, exige a edição do seu template. Portanto, é indispensável que faça uma cópia de segurança dele, para que possa reverter qualquer possível problema. A aplicação dessa funcionalidade não é difícil, basta ter atenção. Confira em nossa barra lateral como ficou. Usamos tanto em elementos individuais como em grupos deles.


Primeiro, procure no template, pelo nome do gadget que quer exibir/ocultar. Encontrando, logo na linha abaixo, você terá o seguinte:


<b:includable id='main'>


Cole isso logo abaixo dele:


<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd +
'&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; :
&quot;none&quot;; return false;" style="float:left;margin-right:5px;">');
//]]>
</script><img src="http://m.aponarte.com.br/gifs/seta.gif"/>
<script type='text/javascript'>
//<![CDATA[
document.write('</a>');
//]]>
</script>


(

Como observamos no primeiro método, aqui também você pode optar por outra imagem no lugar da seta).


Continuando, Procure mais abaixo por:


<div class='widget-content'>


Encontrou? Então cole abaixo dele:


<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>


Descendo mais um pouco, encontre:


<b:include name='quickedit'/>


Agora, acima dele, você cola:


<script type='text/javascript'>
//<![CDATA[
document.write('</div>');
//]]>
</script>


Prontinho! Visualize, se tudo estiver como esperado, salve o seu template. Repita o processo para cada gadget (ou grupo de gadgets). Para agrupar gadgets, basta incluir os scripts dos elementos desejados em um (HTML/Java Script).


Se desejar colocar datas comemorativas em seu site ou blog. Clique aqui.

Compartilhe:

4 comentários:

  1. Olá, Apon! É sempre bom conhecer dicas dos colegas. Sempre observo o carregamento da página, muito desistem quando as páginas são pesadas demais. Um abraço!

    ResponderExcluir
    Respostas
    1. E realmente desagradavel uma página que demora de abrir. Tenho procurado aqui reduzir esse tempo de carregamento. Essas dicas ajudam nisso e também para deixar o blog mais arrumado.

      Um abração e uma boa semana.

      Excluir
  2. Oi Antonio!
    Dicas são sempre bem vindas!
    As vezes coisinhas simples viram "um bicho de sete cabeças"! (eu que o diga).
    Tenha uma semana muito feliz!
    Beijos!

    ResponderExcluir
    Respostas
    1. Tem dica que é mesmo complicada. Mas aqui, a primeira é facílima e a segunda, prestando atenção não tem complicação.

      Um abração e uma boa semana.

      Excluir

Obrigado por sua visita. Aqui você pode deixar seu comentário. Esse espaço é feito para você. Volte sempre!

Antonio Pereira Apon.