Widget sempre in primo piano nella sidebar di Blogger

I widget di Blogger sono fatti per essere visualizzati nel posto in cui si trovano. Se per esempio avete inserito un widget nella parte alta della sidebar risulterà a tutti visibile non appena si apre il blog, invece non lo sarà più se si scorre la pagina verso il basso perché è rimasto nella sua posizione originale. In questo articolo vi spiegherò come posizionare un widget sempre in primo piano mediante un unico codice, cioè anche se scorrete la pagina verso il basso, scorrerà anche il widget che si sovrapporrà a quelli che si trovano sotto di esso, attirando su di sé l'attenzione degli utenti. Una funzione di questo tipo può essere sfruttata per mostrare le pagine sociali ed incentivare l'utente ad aggiungersi agli altri fans, per invogliare l'utente ad iscriversi alla newsletter, per mettere in risalto un articolo ben preciso, per pubblicizzare il sito di un amico o una promozione offerta nel proprio sito o da un sito affiliato.

E' chiaro che una tecnica simile non può essere utilizzata per mostrare banner pubblicitari in primo piano perché solitamente è vietato dal regolamento delle affiliazioni perché si ottengono click fraudolenti. Quindi deve essere un qualcosa volta a mettere in risalto una cosa (post, pagina, etichetta ecc.) del proprio blog!

Per mostrare un widget sempre in primo piano nella sidebar dovete per prima cosa trovare ID del widget da mostrare sempre in primo piano, e poi andare su Modello > Modifica HTML e prima del tag </body> dovete aggiungere il seguente codice:

<script type='text/javascript'>
//<![CDATA[
flot_widg("HTML10");
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>

In questo codice dovete solamente sostituire l'ID evidenziato in rosso per renderlo funzionante sin da subito!