Come scegliere con il cursore il colore dello sfondo in un blog.

Come personalizzare il colore di sfondo del blog inserendo anche immagini di background mostrando una tabella in cui sia il lettore a scegliere il colore da visualizzare nello sfondo.

Nel moderno Designer Modelli di Blogger possiamo selezionare il colore di sfondo che più ci piace per il nostro sito. Basta andare su Modello > Personalizza > Sfondo e usare gli sfondi per quel modello. In alternativa  possiamo anche selezionare una immagine di sfondo tra le molte che vengono proposte oppure caricarne una dal nostro computer.

In questo articolo voglio mostrare una personalizzazione decisamente originale che probabilmente interesserà a poche persone ma che ritengo sia comunque interessante proporre. Con le modifiche che andrò a illustrare sarà lo stesso lettore a scegliere il colore dello sfondo del vostro sito con la possibilità di scegliere anche una immagine di background. Potrà farlo semplicemente passando il cursore su una apposita tabella dei colori da mostrare in un widget. Cliccando sopra al colore prescelto questo si attiverà. Questa personalizzazione non ha bisogno di modifiche al template che sono sempre delicate. 

Si va su Layout > Aggiungi un gadget > HTML/Javascript e si incolla un codice come questo

<table border="0" align="center" width="35%"><tbody>
<tr> <td><span onmouseover="javascript:document.body.style.backgroundColor='#c96d77'; document.body.style.backgroundImage='url(URL_IMMAGINE_SFONDO.PNG)';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGo8UQiohDko3CSWN3Fq7nxeLVbh_JqHAbfe7LqowjHdDzQejt2w1ozE23URpyMyktKmSXere7Ogcwuk7njOvfJGH9TUUJRNyTViRdPrOuThQCAj5xNxkySv_rkVCZYAI3Up0Xy5EeEQU/" /></span></td> <td><span onmouseover="javascript:document.body.style.backgroundColor='#3f6dd9'; document.body.style.backgroundImage='url(URL_IMMAGINE_SFONDO.PNG)';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVpAW_QCf1C6ixra3uYGmG9wE1Rtntb1mwuJV66DEWjTbp3d3rQugtrWE6CkDTETH7oRDowzrir-rxddDHrd_FlITiF-niiiQmh0-qeSvRj2nmtdF7UwT3R9IQeP9t1f9Gk3MxQPPToU4/" /></span></td> <td><span onmouseover="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='url(URL_IMMAGINE_SFONDO.PNG)';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipiYi9oYT6owL-bVpQz7F3GHn-KqnVHHFsfr1zquMFK3vfLtuBf-ANXxu5THIrQa-5lRtcc3uoHbZ1BnRLbfGHwGU8B7a5fYFwKlpB7GRxsPoUDY3mlAXrv_P3QP_7mXM-XuV12GfGniA/" /></span></td> <td><span onmouseover="javascript:document.body.style.backgroundColor='#98ffff'; document.body.style.backgroundImage='url(URL_IMMAGINE_SFONDO.PNG)';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgob4DLH4XvuY6YYf6WmPPXaKMh4q_LrVfeYFuVZT_SjRpJOa_1e-tz2Ex-Svi-KPkMpae3FHIQo9c1bVKFrgz34SeP-qzCWqaWpCfeckuNDWJVfV-OGP6nkS9qyOJXPoCzGn1p3_E5-SA/" /></span></td> <td><span onmouseover="javascript:document.body.style.backgroundColor='#FF962D'; document.body.style.backgroundImage='url(URL_IMMAGINE_SFONDO.PNG)';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1H4JayJXfvn-FjTkoOsz-cbwK6ingv-d6hLy7qzIHIjg8dE1WcYZo7W96k-1Z3aCMo-VcsmQVUxNp3LONZWk4gidicoH9bXryYff6ez8xStGZksiZOWn1gK2W9J4c3jPObouhcBA7yqM/" /></span></td> </tr>
<tr> <td><span onmouseover="javascript:document.body.style.backgroundColor='#90d0a0'; document.body.style.backgroundImage='url(URL_IMMAGINE_SFONDO.PNG)';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwN0ykc0Da6FU2AnGOc7AomjQR3x_xDEQ0FZ2bEijwaorgEEXhYcr9E_8cVv15O_kXodBCWlgWv9zyaGLctpolro2rCuMMQ9q3RF-reC792o4rgnA9uVOcKLRwfFN5QtrEjtfqaxH0OGU/" /></span></td> <td><span onmouseover="javascript:document.body.style.backgroundColor='#ED1C24'; document.body.style.backgroundImage='url(URL_IMMAGINE_SFONDO.PNG)';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVjxgqI0ZxCmiMCtDfS-F4K2i2peSpHfp3vQOsepV-o-vzDtF1gBQRYc6JfWwL6aMAPKLDNWgOepvRFXJoVEeezk8p_bMB7WfEnrY-QWfaMsQmAddOAfL2GGh0X_LGHPa_NdCLCYC1I28/" /></span></td> <td><span onmouseover="javascript:document.body.style.backgroundColor='#ffffff'; document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbO9N7WqzscKtlRLjRYLn6CeHi8l6mhNTLQ9BtoVJx6e-U-q4qyuhBUtRly_OJGAwI230SRjd7r5d53AC73jDvmMxdwB_W3ence6K68-QyEps09E0lXgmkwZ93ZnL9VAjyn1q6hRAqwRk/s1280/charlize2700.jpg)';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKYBR9Xu3dZv-N6OTEF9DD11EJxgqONbfxGE0Wb6BFinsK_I7f0aZ6OiL5QJeodya9iwpsiFSH_9R3sfeSmRsJ8CZcnsXsQh40CEzEHZbKm4g7kQqEjfi8jr8y4jaR3y0VTTv3YZOXw5E/w29-h27-no/"/></span></td> <td><span onmouseover="javascript:document.body.style.backgroundColor='#FFCCCC'; document.body.style.backgroundImage='url(URL_IMMAGINE_SFONDO.PNG)';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvJOpi_T88xd_G6c1RcAdHLHx1aOji0BP4R1eU1TbZ-OIthqWqPwZY2BerY1u7DIZd1gC7MKghU0rnUKktjzKKKCwFATm8fpqgzfzX2iYjo_XtCZx4Px0KgZJ2srs7LRBmJ5uCPZ4zg4Q/" /></span></td> <td><span onmouseover="javascript:document.body.style.backgroundColor='#ccb0e1'; document.body.style.backgroundImage='url(URL_IMMAGINE_SFONDO.PNG)';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGanXxyEICnuhk6NZbYu_hpCEvnx6KyPQlu0cm4sM06KTrjPa9xQ0zyTkTsJVA061s9CLkjwGjoaq9SL9JI7-kH8nigoUKg4EIKyDgmnHAlG-amaFR-HW-oVw-NrxuEEOJDLoA1MrHJbU/" /></span></td> </tr>
</tbody></table>

che è da considerarsi puramente dimostrativo della sintassi da utilizzare e che potrà essere modificato a piacere. Si tratta di un codice di una tabella in cui il contenuto di ciascuna cella inizia con il tag <td> e termina con il tag </td> con questa struttura 

<span onmouseover="javascript:document.body.style.backgroundColor='#98ffff'; document.body.style.backgroundImage='url(URL_IMMAGINE_SFONDO.PNG)';"><img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgob4DLH4XvuY6YYf6WmPPXaKMh4q_LrVfeYFuVZT_SjRpJOa_1e-tz2Ex-Svi-KPkMpae3FHIQo9c1bVKFrgz34SeP-qzCWqaWpCfeckuNDWJVfV-OGP6nkS9qyOJXPoCzGn1p3_E5-SA/" /></span>

Quello che sarà visto effettivamente nella cella sarà l'immagine con l'URL colorato di viola mentre il colore dello sfondo applicato al blog sarà dato dal codice del colore colorato di blu e opzionalmente dall'immagine di sfondo il cui URL è colorato di rosso. Ciascuna cella ha una dimensione di 23x21 pixel e queste sono le dimensioni anche delle immagini che vengono visualizzate all'interno di ciascuna di esse. Il parametro della larghezza width="35%" inserito nella prima parte del codice è opzionale e serve esclusivamente per dimensionare al meglio la tabella all'interno della sidebar.

Questo codice si può usare in una qualsiasi pagina web e non solo su Blogger. Per rendervene conto incollate il codice in un Editor online HTML come HTML Edit senza il parametro width="35%" e vedrete come il codice sia funzionante anche in una pagina web generica.