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

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

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 -