Aggiungere cornici, bordi e sfondi alle immagini su Blogger.

Come aggiungere colori di sfondo, bordi e cornici a tutte o solo ad alcune immagini di Blogger e di altre piattaforme di blogging.

Nella piattaforma Blogger esiste il Designer Modelli che permette agli utenti di personalizzare la parte esterna delle immagini per inserire un contorno colorato o un bordo. Per accedervi si va su Modello > Personalizza > Avanzato > Immagini. Si possono settare i parametri del colore dello sfondo, del colore del bordo e del colore del testo della didascalia. 

Tra i colori ci sono quelli del modello prescelto e quelli suggeriti dal Designer Modelli ma si può fare anche di testa nostra e utilizzare i codici dei colori da incollare nell'apposito campo o infine farsi aiutare dalle comode tavolozze di colore che si aprono cliccando sulla freccetta verticale.

Queste scelte estetiche saranno visibili nella Anteprima posta in basso ma diventeranno effettive solo quando si cliccherà su Applica al blog posto in alto a destra. 

È interessante notare che si può anche impostare il colore Trasparente per non visualizzare sfondi e bordi. Nonostante esista questa possibilità in taluni modelli non si riesce a togliere del tutto i contorni e i bordi direttamente dal Designer Modelli. Bisogna allora operare direttamente nel template incollando un apposito codice. 

In questo post a fronte di un commento ricevuto ieri mi occuperò invece di come inserire automaticamente delle cornici formate da sfondi e bordi a tutte le immagini senza usare il Designer Modelli visto che con i template scaricati da internet spesso non funziona.

COME INSERIRE SFONDI E BORDI NELLE IMMAGINI DI BLOGGER

Si va su Modello > Modifica HTML, si cerca la riga ]]></b:skin> e, subito sopra, si incolla

.post-body img {
  padding:10px !important;
  border:2px solid #003366 !important;
  background-color:#d7fffc !important;
  }

Si salva il modello. Il risultato sarà il seguente



Naturalmente si possono personalizzare tutti i parametri:

• padding:10px indica la dimensione della cornice in tutti e 4 i lati
• border:2px solid #003366 determina lo stile del bordo e la sua dimensione
• background-color:#d7fffc invece è il colore dello sfondo.

Al posto di un colore si può usare anche una immagine per creare una cornice più originale. In questo caso l'ultima riga deve essere sostituita dalla seguente 

background: URL('URL_immagine') !important;

che produrrà un risultato simile a questo 

Naturalmente al posto di URL_immagine dovrà essere incollato l'indirizzo di una immagine tipo motivo (o Texture) che precedentemente sia stata caricata su Picasa.

AGGIUNGERE UNA CORNICE A UNA SINGOLA IMMAGINE

Se invece di operare su tutte le immagini si vuole inserire una cornice a una sola foto allora basta intervenire nell'HTML e non nel modello. L'immagine va postata con questo codice

<img width="300" style="padding:10px; border:2px dotted #F00; background-color:#ffeab6;" src="URL_Immagine"/>

dove oltre ai parametri precedenti si può impostare anche la larghezza della foto (300 pixel). Una immagine postata con queste modalità verrà visualizzata con questo aspetto

Con questo sistema si possono creare cornici diverse per immagini diverse. Anche in questo caso si può sostituire al colore di sfondo una immagine di background inserendo il tag

background: URL('URL_IMMAGINE_SFONDO');

al posto di background-color:#ffeab6;. Concludo ricordando che il codice per l'aggiunta di una cornice a una singola immagine funzionerà anche su Wordpress e le altre piattaforme di blogging.