Blogger: mostrare un widget fisso nella sidebar allo scorrere della pagina

Come mostrare un widget di Blogger fisso allo scorrere della pagina cioè flottante che resta sempre visibile nel layout

Certamente nella vostra navigazione avrete incontrato delle pagine web che, se scrollate verso il basso, mostrano un oggetto HTML fisso sempre in primo piano. Questo comportamento lo si può ottenere applicando a un elemento HTML il tag position:fixed; in modo opportuno.

In questo articolo vedremo appunto come mantenere sempre visibile un widget della sidebar, quando la si scorre la pagina verso il basso. Verrà utilizzato un javascript che in linea di massima non può essere iterato, nel senso che può essere mantenuto sempre visibile un solo widget ma non due o più, anche per ragioni che si sovrapporrebbero gli uni agli altri.

A chi pensa di utilizzare questa tecnica per tenere sempre in primo piano un banner pubblicitario, ricordo che potrebbe essere considerata una tecnica non ammessa da alcuni programmi di affiliazione come quello di Google. Consiglio quindi di evitare di tenere sempre in primo piano unità pubblicitarie, a meno di non ricevuto un esplicito consenso da parte della concessionaria.

Si possono mantenere fissi e sempre in primo piano tutte le tipologie di widget; occorrerà soltanto conoscerne l'ID, per inserirlo nel codice del javascript. Ricordo brevemente come trovare l'ID di un widget di Blogger.

1. Aprire con Chrome la homepage del nostro sito da loggati con il nostro account Blogger
2. Cliccare sulla icona della chiave inglese e del cacciavite in basso a destra del widget in oggetto
3. Verrà aperta una finestra di Layout per modificare tale widget
4. Nella parte alta verrà visualizzato l'indirizzo del gadget
5. Lo si scorre verso destra fino a trovare la stringa widgetId=...
6. Quello che si vede dopo widgetId= è appunto l'ID del gadget.

Se non si riesce a accedere da Chrome, si può andare su Layout e cliccare su Modifica nell'elemento pagina in oggetto per trovarne l'ID. I gadget nativi di Blogger hanno un ID definito, seguito dal numero d'ordine. Per esempio per l'Archivio è BlogArchive1, per le Etichette è Label1, PopularPosts1 per i Post Popolari e così via.

I gadget più comuni sono quelli HTML/Javascript che anche loro sono indicati con il loro numero d'ordine che dipende appunto dall'ordine con cui sono stati installati. Esiste anche un terzo metodo per trovare l'ID di un widget. Si va su Tema -> Modifica HTML e si clicca sull'area del codice. Successivamente si digita la scorciatoia da tastiera Ctrl+F per visualizzare la casella di ricerca in cui incollare il nome del widget.

Si va su Invio e verrà evidenziata la riga di codice con il widget in questione. Tale riga inizierà con <b:widget e continuerà con id='ID-DEL-WIDGET'. Conoscere l'ID del gadget è essenziale per tenerlo sempre in primi piano.

CODICE DA USARE PER METTERE UN WIDGET IN PRIMO PIANO

Dopo aver salvato in template di Blogger, si va su Tema -> Modifica HTML e si clicca sull'area del codice. Si digita come in precedenza Ctrl+F per visualizzare il campo di ricerca. Vi si incolla la riga </body> per poi andare su Invio. Verrà evidenziata tale riga e, subito sopra a questa, 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:#fff !important; position:fixed; top:0; z-index:99999;}
</style>

quindi si Salva il Tema. Come test ho usato l'ID HTML14 che ovviamente dovrà essere sostituito con l'ID del widget che volete tenere sempre in primo piano. L'unica personalizzazione è quella dello sfondo del widget che, per esempio, si può farlo cambiare quando si trova in posizione fissa. Nel codice ho lasciato uno sfondo bianco #fff, ma si può agire anche in modo diverso. Importante anche inserire uno z-index particolarmente alto.

Quando si scorre la pagina verso il basso, il widget in primo piano arriverà fino alla posizione top:0; e dopo rimarrà fisso e visibile, sopra agli altri elementi della sidebar, che invece scorreranno regolarmente.

Demo Clicca qui

Se si modifica il valore in top:0; purtroppo il codice smette di funzionare quindi non si può scegliere la posizione nella sidebar, ma selezionare solo quella più in alto rispetto al resto della pagina.