Pubblicato il 17/04/13e aggiornato il

Come rendere flottante e sempre in primo piano un qualsiasi widget di Blogger.

Come visualizzare sempre in primo piano above the fold un qualsiasi widget di Blogger posizionato nella sidebar.
In linea di massima un widget inserito nella sidebar si vede soltanto quando scorrendo la pagina si arriva alla altezza in cui è posizionato. Nel caso in cui ci fosse l'esigenza di tenere sempre in primo piano un particolare gadget che fosse molto importante per il sito si può renderlo flottante inserendo nel modello un particolare javascript.

Innanzitutto occorre conoscere l'ID del widget in questione. Questo si può fare in molte maniere per esempio accedendo a Modello > Modifica HTML > Ctrl+F, incollando su Search il titolo del widget e pigiando su Invio come mostrato nel seguente screenshot

id-widget-blogger

L'ID del gadget verrà dopo id=". Un sistema più semplice è quello di andare su Layout e cliccare su Modifica oppure di andare sulla icona del cacciavite e chiave inglese per modificare l'elemento pagina. L'ID del widget si visualizzerà alla fine dell'indirizzo web

id-widget-blogger[5]

Con entrambi i metodi si è potuto vedere che l'ID del widget in questione è HTML14. I gadget del tipo HTML/Javascript avranno sempre un ID HTMLX con X come numero progressivo. Si possono anche rendere flottanti i widget ufficiali di Blogger che hanno invece ID del tipo LinkList1, PopularPosts1, ecc.

Dopo aver salvato il template si va su Modello > Modifica HTML, si clicca sull'area del codice, si digita Ctrl+F, quindi si incolla nel campo Search la riga </body> e si clicca su Invio per visualizzarla. Subito sopra a tale riga si incolla questo codice

<script type='text/javascript'>
//<![CDATA[
flot_widg("HTML14");
function flot_widg(elem) {
    var wdg_fl = document.getElementById(elem);
    var scroll_wd = document.createElement("div");
    wdg_fl.parentNode.insertBefore(scroll_wd, wdg_fl);
    var width = wdg_fl.offsetWidth;
    var tipo_wd = wdg_fl.className + ' wdg_fl';
    window.addEventListener('scroll', flott_widget, false);
    function flott_widget() {
        var rect = scroll_wd.getBoundingClientRect();
        if (rect.top < 0) {
            wdg_fl.className = tipo_wd + ' flott_widget';
            wdg_fl.style.width = width + "px";
        } else {
            wdg_fl.className = tipo_wd;
        }
    }
}
//]]>
</script>
<style type='text/css'>
.flott_widget {background:#ffffff !important; position:fixed; top:0; z-index:99999;}
</style>

Si salva il modello. Al posto di HTML14 si deve inserire l'ID del widget che vogliamo mantenere flottante. Si può anche mettere un colore di sfondo che si viene a visualizzare quando si scorre la pagina.



Alternativamente invece di incollare questo codice nel modello si può andare su Layout > Aggiungi un gadget > HTML/Javascript e incollarlo in Sezioni del sito per poi salvare. Nel post di Demo quando scorrerete la pagina verso il basso vedrete il widget flottante che rimarrà sempre attaccato alla parte alta del layout. Non vi consiglio di usare questa tecnica con i banner pubblicitari perché potreste andare incontro a violazioni del regolamento.
Fonte | Blogger Sentral -




5 commenti :

  1. ciao Ernesto, questo post è davvero molto utile, grazie mille!
    Se volessi rendere flottanti due gadget contemporaneamente (nel mio caso i due elenchi di link che ho accanto in alto accanto al mio header)come mi regolo? incollo due volte il codice, uno per ogni gadget? Grazie

    Federica

    RispondiElimina
    Risposte
    1. @# Onestamente la vedo difficile. Però provare a incollare due codici con la solo differenza dell'ID del widget non costa nulla. Non ho testato e ho dei dubbi...
      Con un po' più di pratica potresti provare a modificare in uno dei due codici la funzione
      flot_widg
      chiamandola per esempio
      flot_widg1
      e cambiando anche l'altra occorrenza che sta subito sopra. Non ci vuole molto però non assicuro il risultato :)

      Elimina
  2. Ciao Ernesto, molto interessante! Io però avrei un'esigenza: siccome ho una pagina a scorrimento orizzontale, si può rendere flottante il gadget anche in orizzontale? Grazie!

    RispondiElimina
    Risposte
    1. @# Come fai a rendere flottante il gadget in orizzontale? :DD
      La pagina si scorre verso il basso e poi si torna verso l'alto. Non ci si sposta in orizzontale.

      Elimina
  3. ah ah leggevo del gadget flottante orizzontale ah ah .
    Ok fatto tutto. Una curiosità: ho dovuto fare 2 procedimenti ( identici) al 1° non funzionava, il secondo sì, Boh....

    RispondiElimina

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.