Pubblicato il 04/05/14 - aggiornato il  | 7 commenti :

Come lasciare un widget di Blogger sempre in primo piano allo scorrere della pagina.

Come mostrare sempre al top della pagina un qualsiasi widget di Blogger usando il suo ID e un apposito javascript.
In alcuni siti di Blogger ci potrebbe essere l'esigenza di mostrare sempre un certo elemento che riteniamo importante per i navigatori. Potrebbe essere il gadget degli ultimi post oppure quello dei Post più Popolari o ancora il gadget di una campagna di sensibilizzazione a cui si sia particolarmente legati. Il metodo che vado a illustrare parte dall'individuazione dell'ID del widget che è univoco per poi inserire un javascript che lo manterrà sempre al top della pagina.

Per scoprire l'ID del widget basta cliccare sulla icona della chiave inglese e del cacciavite. In questo modo si aprirà la finestra per editarlo. Nella parte alta si visualizzerà il suo URL; scorriamo l'indirizzo fino a arrivare alla sua parte finale che sarà del tipo …&widgetId=ID_DEL_WIDGET dove al posto di ID_DEL_WIDGET  ci potrebbe essere HTML3 se si tratta di un gadget HTML/Javascript oppure BlogArchive1 nel caso del widget dell'Archivio o ancora Label1 se è invece quello delle Etichette. Dopo aver individuato l'ID del widget da mettere in primo piano passiamo alla modifica del modello

widget-flottante-demo

per lasciarlo sempre visibile anche dopo lo scroll della pagina. Per marcare la differenza verrà inserito un diverso background e una ombreggiatura rispetto a quando invece si trova nella posizione abituale. Dopo aver salvato il template si va su Modello > Modifica HTML e si digita Ctrl+F per cercare la riga </body>. Subito sopra a questa si incolla questo codice

<!-- Widget Flottante Inizio -->
<script>
//<![CDATA[
wid_float("ID_DEL_WIDGET "); // Inserisci ID del widget
function wid_float(elem) {
    var pin_wid = document.getElementById(elem);
    var scrollee = document.createElement("div");
    pin_wid.parentNode.insertBefore(scrollee, pin_wid);
    var width = pin_wid.offsetWidth;
    var iniClass = pin_wid.className + ' pin_wid';
    window.addEventListener('scroll', float_pin, false);
    function float_pin() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            pin_wid.className = iniClass + ' float_pin';
            pin_wid.style.width = width + "px";
        } else {
            pin_wid.className = iniClass;
        }
    }
}
//]]>
</script>
<style>
.float_pin {background:#F3F3F3 !important; position:fixed !important; top:0; z-index:99999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.2); margin-top: 0; position:relative\9 !important;}
</style>
<!-- Widget Flottante Fine -->

Si salva il modello. Per verificarne il funzionamento accedete alla Demo



e scorrete la pagina verso il basso in modo da visualizzare l'Archivio Blog sempre al top della pagina. Come personalizzazione consiglio solo di agire sul colore di sfondo (#F3F3F3) che assumerà il gadget durante lo scroll della pagina. Se nel vostro sito utilizzate dei programmi di affiliazione pubblicitaria non vi consiglio di usare questo metodo per avere sempre in primo piano i banner perché un sistema siffatto potrebbe essere in contrasto con il regolamento del programma.


7 commenti :

  1. wow, avevo pensato di spostare gli articoli correlati e metterli come widget laterale ma poi ho abbandonato l'idea perché scrollando era difficile notarli, adotterò sicuramente questo metodo.
    Ti dovrei fare anche una domanda: quando si usano i tag condizionali per mostrare un widget solo nei post, questi carica e quindi appesantisce anche l'homepage?

    RispondiElimina
    Risposte
    1. No. Fa fede il sorgente pagina. Quando non è presente un codice significa che non viene caricato. Se hai dei dubbi basta andare a controllare
      @#

      Elimina
  2. Ciao Ernesto :) credi si possano far flottare due widget insieme?

    RispondiElimina
  3. Se hai due sidebar si altrimenti credo che andranno a finire uno sopra all'altro anche se bisognerebbe testare
    @#

    RispondiElimina
  4. Si può fare solo con un widget o anche più di uno?
    Pensavo ad esempio header del blog e menù orizzonyale. Grazie!

    RispondiElimina
  5. Per il menù orizzontale ci sono già dei menù flottanti. Guarda alla voce menù nel menu di questo sito. Con l'header si può fare. Ora non mi ricordo quale sia l'ID dell'header, sono al cellulare ma basta trovarlo. Con più di un widget flottante bisogna testare per vedere che succede
    @#

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy