Pubblicato il 05/02/11 - aggiornato il  | 13 commenti :

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

widget nascosti in blogger 

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.





13 commenti :

  1. Interessante (come al solito) questo post. Lo volevo mettere in pratica con un lenco di link ma il modello non riporta la stessa dicitura (che ho trovato invece nel blogroll). Hai idea se si possa fare qualcosa? Grazie e ciao.

    RispondiElimina
  2. @Stefano
    Espandi i modelli widget e controlla che ci siano le righe fondamentali per inserire la personalizzazione cioè
    < div class='widget-content' >
    e
    < data:content/ >
    quindi inserisci lo script. Se non ci sono c'è poco da fare...

    RispondiElimina
  3. Manca il secondo (data-content). Quindi nulla da fare. Grazie lo stesso. Buona domenica

    RispondiElimina
  4. avevo visto un effetto simile ma al passaggio del mouse. molto bello anche perché (forse con jquery) la visualizzazione avveniva abbassando il contenuto in maniera graduale.
    potrebbe essere oggetto di un prossimo interessantissimo post!
    :)

    RispondiElimina
  5. @Stefano
    Prova ad aggiungere la seconda e terza parte del codice subito sotto a
    < div class='widget-content' >
    Potrebbe funzionare ugualmente. Salva il modello prima di procedere.

    @Giorgiogal
    L'unica personalizzazione ulteriore che mi viene in mente è quella di sostituire onclick con onmouseover in modo da mostrare/nascondere il widget al semplice passaggio del mouse (ho anche aggiornato il post). Di altre funzionalità simili basate su JQuery non ne sono a conoscenza :)

    RispondiElimina
  6. Complimenti. Funziona benissimo. Grazie ancora

    RispondiElimina
  7. Parsifal,
    Eccolo, Guarda qua, nella colonna di destra, categories e archives:
    http://demo.woothemes.com/premiumnews/

    RispondiElimina
  8. @Giorgiogal
    Ho visto ma si tratta di un tema Wordpress e mi sembra anche premium. Avranno un plugin, immagino

    RispondiElimina
  9. ok ok non voglio insistere... ma sempre di javascript si tratterà...

    RispondiElimina
  10. Ho provato a inserire questa modifica in un blog di prova, ma ho notato che nel caso si sia scelto "elenco di link" oppure "etichette", la prima voce dell'elenco risulta allo stesso livello di "[+/-] Visualizza widget". Ossia vien fuori

    [+/-] Visualizza widget Etichetta 1
    Etichetta 2
    Etichetta 3
    ...

    Finora non sono riuscita a trovare una soluzione. Hai forse qualche idea?

    Tks

    RispondiElimina
    Risposte
    1. @ Bastet ...
      Francamente no ...

      Elimina
    2. Ho trovato un altro script che sembra funzionare, anche se leggermente diverso da quello da te proposto. Se ti interessa per un eventuale articolo, posso postare il link del sito originale (è in inglese).

      Elimina
    3. @ Bastet...
      Grazie ma in questo momento ho molto da fare, nel blog posto poco e di carne al fuoco ce n'è già troppa :)

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.