Come mostrare o nascondere il contenuto di un widget in Blogger.

Se avete  la sidebar piena di widget, sentirete certamente l'esigenza di ottimizzare lo spazio per non allungare troppo la colonna. Questo problema è comune a tutti coloro che hanno inserito il gadget del BlogRoll e che seguono parecchi siti. Esiste la possibilità di mostrare solo un numero determinato di post ma è innegabile che è uno di quei widget che allunga parecchio il layout del blog. Vediamo come sia possibile modificare il modello in modo che i lettori e lo stesso blogger possano scegliere se visualizzare o meno un determinato widget.

L'obiettivo è quello di inserire un link che mostri o nasconda  il widget esattamente come avviene per il gadget degli Ultimi Commenti presente in questo Blog di Prova. E' visibile una scritta che, se cliccata, nasconde o mostra il gadget

 

Questa personalizzazione può essere inserita in qualsiasi widget perché in Blogger hanno tutti più o meno la stessa struttura. Andate su Design > Modifica HTML e cercate il codice dopo aver messo la spunta a espandi modelli widget. Se non siete molto pratici, potete consultare il video tutorial su come modificare il modello di Blogger. Facciamo l'esempio del widget che ho preso come test. Prima delle modifiche aveva questo codice

<b:widget id='HTML6' locked='false' title='ultimi commenti' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

In cui HTML6 indica l'ID del widget, il numero può variare ovviamente da modello a modello, e Ultimi Commenti è il titolo del gadget. Come vedete si inizia sempre con il tag <b:widget id=… e si termina con </b:widget>. Per applicare la personalizzazione illustrata sopra dobbiamo modificare il codice in questo modo

<b:widget id='HTML6' locked='false' title='ultimi commenti' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
<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><em>[+/-] Visualizza Widget</em>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
  <div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;">');
//]]>
</script>
    <data:content/>
  </div>
<script type='text/javascript'>&gt;
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Il codice da aggiungere è quello colorato di rosso e deve essere incollato esattamente nelle posizioni indicate. La riga evidenziata di viola rappresenta quello che sarà visto al posto del gadget completo. Il tag <em> e la sua chiusura </em> ne determinano l'aspetto in corsivo. Si può sostituire questa espressione con un altra che sia di maggior gradimento.

Gli appassionati di grafica potranno anche inserire una immagine al posto del testo che avrà la stessa identica funzione. In questo caso, la scritta evidenziata di viola dovrà essere sostituita da questa espressione

  <img src="URL IMMAGINE" title="TITOLO" alt="TESTO ALTERNATIVO"/>

dove occorrerà inserire l'indirizzo dell'immagine e i due tag Alt e Title. Si può inserire anche un testo e una immagine contemporaneamente nell'ordine che ci piace di più. Se si sostituisce onclick con onmouseover, si potrà nascondere o visualizzare il widget, non con un click del mouse, ma solo passando sopra alla scritta con il cursore.