Pubblicato il 18/07/14e aggiornato il

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. 


demo-sfondo-personalizzato

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://lh4.googleusercontent.com/-Gp4z7ozi76Y/TeXxINpSdtI/AAAAAAAATWQ/4x5bLtKKZX4/rosa.png" /></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://lh4.googleusercontent.com/-y161lBMBoF4/TeXxh5hDvQI/AAAAAAAATWY/yfukVv0YqDw/azzurro.png" /></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://lh6.googleusercontent.com/-NwB-J369qzM/TeXx2aoHlaI/AAAAAAAATWc/hEuhiB0mZlk/nero.png" /></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://lh5.googleusercontent.com/-ib7G1g-CqxQ/TeXyRBvLiYI/AAAAAAAATWg/nPvoYPS6MRY/turchese.png" /></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://lh3.googleusercontent.com/-rOBZ9UUxgOo/TeXysOYZRvI/AAAAAAAATWk/OYsXdWlTe2U/arancione.png" /></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://lh3.googleusercontent.com/-faPmHRwJEe8/TeX0pCuN_yI/AAAAAAAATW0/vJf6lc7LLZg/verde.png" /></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://lh4.googleusercontent.com/-BZPJpeeR8Dg/TeX09nHIsjI/AAAAAAAATW4/qrbNzLZBZHM/rosso.png" /></span></td> <td><span onmouseover="javascript:document.body.style.backgroundColor='#ffffff'; document.body.style.backgroundImage='url(https://lh5.googleusercontent.com/-S8ft1c96NoI/TeYCuJXC01I/AAAAAAAATYg/ydOV05b66DQ/s1280/charlize2700.jpg)';"><img border="1" src="https://lh5.googleusercontent.com/jhy6J7t7LjBuN9dkLf_zqaTA0jl4r8O78D-PSnkobaHq=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://lh5.googleusercontent.com/-q2cloY28Qbc/TeX10hhx1WI/AAAAAAAATXA/qVBLq1TEn8Y/rosachiaro.png" /></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://lh5.googleusercontent.com/-b1KQOvugu8M/TeX2GTLyQfI/AAAAAAAATXI/gGgg9DDg3p8/lilla.png" /></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://lh5.googleusercontent.com/-ib7G1g-CqxQ/TeXyRBvLiYI/AAAAAAAATWg/nPvoYPS6MRY/turchese.png" /></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.




3 commenti :

  1. Personalizzazioni interessante. :)

    Io ho scelto di mantenere bianco lo sfondo del mio blog perché - nonostante quanto dicano - riesco a leggere meglio sul bianco che su un colore scuro. Magari per altri è diverso. Così possono scegliere... ;)


    E.

    RispondiElimina
  2. Ciao, colgo l'occasione di questo post per chiederti se sai (o magari hai scritto da qualche parte) come cambiare il colore della parte bassa (footer) del blog su blogger. Nel momento in cui io scelgo uno sfondo è questo per tutto il blog. Mentre mi piacerebbe avere uno sfondo di un colore diverso della sola parte bassa del blog quella sotto all'ultimo post dove ci sono i link e le altre informazioni che restasno sempre fisse in basso alla pagina. Grazie

    RispondiElimina
    Risposte
    1. Prova a vedere se trovi utile questo post
      http://www.ideepercomputeredinternet.com/2012/03/come-modificare-gli-elementi-del-footer.html
      Per lo sfondo di tutto il footer seguendo le indicazioni del post prova questo codice
      .footer-outer {background-color:#eee !important;}
      dove al posto di eee metti il codice del colore
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.