Come far scorrere un widget di Blogger insieme alla pagina.

Come far socrrere un widget di Blogger insieme alla pagina per averlo smpre visibile nel layout.

Il layout tipico di un blog prevede sulla destra, sulla sinistra o da entrambe le parti la presenza una sidebar in cui sono inseriti dei widget da mostrare ai lettori. Tra questi gadget ce ne potrebbe essere uno che riteniamo particolarmente importante tanto da decidere di tenerlo sempre visibile anche allo scorrere della pagina. Un  tale widget dovrebbe preferibilmente essere posizionato alla fine della sidebar perché altrimenti spingerebbe verso il basso i gadget posizionati sotto di esso.

Ricordo di aver già presentato un tutorial per mostrare un widget sempre in primo piano che si basava su un javascript così come l'hack che vado a presentare. Il metodo già proposto può essere usato anche per widget posizionati nella parte iniziale della sidebar che però potranno nascondere gli altri widget durante lo scroll della pagina. La scelta tra uno dei due sistemi potrà essere fatta dopo averli testati entrambi. Per prima cosa dovremo scoprire quale sia l'ID del widget che vogliamo rendere scorrevole. Se utilizziamo un browser quale Firefox o Chrome si potrà cliccare sulla icona del cacciavite e della chiave inglese per aprire la sua finestra di configurazione. Nel caso non sia possibile usare questo sistema si può andare su Layout e cliccare su Modifica del gadget in questione

In realtà non vogliamo modificare nulla ma individuare l'ID del gadget. Nella finestra che si apre si va in alto nella barra dell'indirizzo che si scorre fino alla fine

L'ID del widget viene dopo la stringa widgetId= e è la parte finale dell'indirizzo. Nello screenshot l'ID è Image1 perché si tratta di un gadget di una immagine ma per quello che riguarda i widget HTML/Javascript potrebbe essere HTML1, HTML2, ecc. Invece quello delle Etichette sarà Label1 mentre quello dell'Archivio potrebbe essere BlogArchive1.

Dopo aver acquisito questa informazione e dopo aver salvato il template si va su Modello > Modifica HTML e subito sopra alla riga </body> si incolla il seguente codice

<script type='text/javascript'>
//<![CDATA[
$(function () {
var offset = $("#Image1").offset();
var topPadding = 30;
$(window).scroll(function () {
if ($(window).scrollTop() > offset.top) {
$("#Image1").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
})
} else {
$("#Image1").stop().animate({
marginTop: 0
})
}
})
});
//]]>
</script>

che come vedete è funzione dell'ID del widget che è presente in tre occorrenze. Si salva il modello.

Consiglio di non utilizzare questa tecnica per tenere sempre in primo piano dei banner pubblicitari senza aver prima consultato il circuito a cui fanno capo perché potrebbe andare contro al regolamento. Oltre all'ID del widget l'unica pefsonalizzazione riguarda la distanza tra il widget scorrevole e la parte alta della pagina proposta in 30 pixel.