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

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.