Duas maneiras para exibir ou ocultar gadgets com um clique ou toque - A arte da vida. Apon HP

Bom estar com você aqui no A ARTE DA VIDA. APON HP!


Dê um toque. Leia um escrito especialmente sorteado para você. Clique na figura abaixo.
Clique aqui, para ler um texto aleatoriamente selecionado pelo sistema.

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

Publicado em domingo, 20 de abril de 2014



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="https://aponarte.sslblindado.com/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.



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.





Rosa da amizade/Afeto enviada pela CÉU.


Rosa da amizade/Afeto enviada pela CÉU.


Troféu rosa da amizade/Afeto.


Rosa da amizade/Afeto do Poetizando e encantando da Professora Lourdes..



Follow
View My Stats

DMCA.com Protection Status


@INSTAGRAM