Come mostrare o nascondere i widget HTML con JQuery.

Come nascondere un widget HTML in Blogger con JQuery e come dare la possibilità al lettore di espanderlo cliccandoci sopra con il cursore

Se siete utenti di Blogger e se avete già provato a personalizzare il vostro modello avrete certamente sentito parlare dei tag condizionali che servono per mostrare gadget o elementi solo in determinate pagine oppure ovunque escluso una tipologia di pagine. Si tratta di uno strumento potentissimo per organizzare meglio il layout. Qualche volta però non è sufficiente e si sente l'esigenza di ottimizzare ulteriormente lo spazio soprattutto della sidebar.

A tale scopo è utile inserire un cursore di scorrimento per mostrare solo una porzione di widget e nello stresso tempo dare la possibilità al lettore di scorrerlo tutto tramite un cursore laterale. Un'altra possibilità è quella di mostrare solo il titolo del widget lasciando al lettore la scelta di cliccarci sopra per visualizzarlo. Una alternativa sempre su questa falsariga è quella di usare la libreria Prototype e Scriptaculous che rende la transizione tra le due condizioni molto meno repentina.

La difficoltà di questo ultimo metodo è che la libreria Prototype e Scriptaculous non è compatibile con la libreria JQuery che invece è molto più utilizzata nei template di Blogger. Vediamo quindi come sia possibile usare proprio JQuery per nascondere un dato widget dando la possibilità al navigatore di visualizzarlo cliccando sul titolo o su una apposita icona.

Dopo aver salvato il template occorre andare su Modello > Modifica HTML. Se JQuery non fosse ancora presente nel modello si cerca la riga </head> e, subito sopra, si incolla questo codice

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'/>

Questa prima operazione non si deve fare se JQuery fosse già presente. Successivamente si cerca il codice del gadget cliccando su Vai al widget e selezionando quello desiderato. Si clicca sulle freccette nere sulla sinistra per visualizzarne tutto il codice che dovrà essere modificato

Dopo aver individuato i tag <data:title/> e <data:content/> bisognerà aggiungere le righe colorate di rosso subito prima e subito dopo tali tag in questo modo

<b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'>
<span id='espanderewidget1' style='cursor:hand;cursor:pointer;'>
&#9660;&#9650;
<data:title/>
 &#9650;&#9660;</span>
 </h2>
  </b:if>
  <div class='widget-content'>
<div class='espandere1' style='display: none;'>  
<data:content/>
 </div>
<script>$(document).ready(function(){$(&#39;#espanderewidget1&#39;).click(function(){$(&#39;.espandere1&#39;).slideToggle(&quot;slow&quot;)})});</script>
  </div>
  <b:include name='quickedit'/>

Si salva il modello. La stringa &#9660;&#9650; rappresenta le frecce verticali e orizzontali che si visualizzeranno prima e dopo il titolo del widget. Possono essere usati altri simboli o addirittura una immagine. A tale scopo si tolgono tali stringhe e accanto a <data:title/> si può incollare il codice

<img src='URL IMMAGINE' border='0' width='18px' height='14px'/>

rispettivamente subito prima o subito dopo <data:title/> a seconda se si vuole visualizzare l'immagine prima o dopo il titolo. Si possono anche settarne le dimensioni in pixel. Tale sistema può anche essere usato per più di un gadget HTML. Basterà cercare il codice del secondo widget e sostituire espanderewidget1 con espanderewidget2 e espandere1 con espandere2 e così via per il terzo gadget e gli altri eventuali.