Come aumentare o diminuire lo spazio tra i widget di Blogger.

Tutorial su come aumentare o diminuire lo spazio tra i widget (o gadget) presenti nella sidebar dei blog su Blogger.

La maggior parte dei widget di Blogger vengono posizionati nella sidebar. La distanza tra questi gadget può risultare giusta e simmetrica oppure per qualche ragione può non esserlo affatto. L'obiettivo che mi propongo in questo articolo è quello di mostrare come risolvere questo piccolo problema per rendere identiche le distanze tra i vari widget.

Questa operazione si dovrebbe fare usando i tool Ispeziona Elemento di Chrome o Analizza Elemento di Firefox ma vedremo che potremo farne anche a meno con un semplice trucco. La procedura è quella di individuare il selettore univoco del widget o dei due widget adiacenti quindi di aggiungere al modello un CSS per aumentare o diminuire le distanze.

COME RICAVARE L'ID DI UN WIDGET DI BLOGGER

Si va su Layout e si clicca su Modifica sull'elemento pagina di cui si vuole trovare l'ID. Alternativamente si può cliccare sulla icona del cacciavite e della chiave inglese direttamente dalla pagina web del sito. Questa icona la visualizzerà solo l'amministratore del sito e solo lui potrà aprire la finestra del gadget

Prendendo come test il layout del precedente screenshot poniamo che si voglia aumentare la distanza tra il gadget Cerca nel blog e quello delle Etichette. Lo si può fare in due modi:

1. Aumentando il margine basso del widget Cerca nel blog
2. Aumentando il margine alto del widget Etichette

Dopo aver aperto la finestra del widget dovremo scorrere il suo URL fino in fondo

Gli ID del gadget sarà la stringa finale dopo widgetId= (nel test CustomSearch1 e Label1). Si va quindi su Modello -> Modifica HTML e si cerca la sezione <b:skin>.  Si clicca sulla freccetta nera posta sulla sinistra per visualizzare tutto il codice quindi con Ctrl+F si cerca la riga ]]></b:skin>. Subito sopra a questa si incolla un codice come questo

#CustomSearch1 {
margin-bottom: 80px
}

per aumentare il margine della parte bassa del primo widget. Oppure si incolla questo codice

#Label1 {
margin-top: 80px
}

per aumentare il margine della parte alta del secondo widget. Gli ID dei widget colorati di viola debbono essere sostituiti dai selettori dei nostri widget. Se si volesse diminuire la distanza invece di aumentarla dovremo sostituire il numero positivo (80px quello proposto) con un numero negativo (Es. -80px). Naturalmente il valore numerico in pixel della distanza può essere modificato secondo le esigenze dei singoli template. Dopo aver salvato il modello si avrà questa situazione 

in cui è evidente l'amento della distanza tra i widget.