Come aggiungere cornici, bordi e sfondi a tutte le immagini pubblicate in un blog su Blogger.

Nella maggior parte dei modelli non esiste uno stile particolarmente sofisticato che definisce il modo di pubblicazione delle immagini. In genere queste vengono viste esattamente come vengono postate con l'aggiunta al massimo di un bordo. Se si possiede un blog nel quale le foto hanno grande importanza e si vuole creare uno stile personalizzato si possono seguire le seguenti indicazioni

Si può cioè creare uno stile che consenta automaticamente di

1. Aggiungere dei bordi alle immagini
2. Aggiungere dello spazio tra bordo e immagine (padding)
3. Inserire una cornice di sfondo tra bordo e immagine

E' chiaro che questa personalizzazione può essere interessante per blog con attitudine artistica e sarebbe assolutamente fuori luogo per un blog come questo che si occupa di informatica.

Per prima cosa andate a vedere se nel vostro blog è presente uno stile per la pubblicazione delle immagini. Recatevi su Layout > Modifica HTML e cercate una riga di questo tipo

.post img {

questo è l'inizio del foglio di stile che dà le istruzioni di pubblicazione. In un modello Sample Blog si trova per esempio questo blocco di codice

.post img {
  padding:4px;
  border:1px solid $bordercolor;
  }

dove le due parentesi graffe rappresentano l'inizio e la fine dei parametri immessi. In altri template il blocco di codice relativo può essere anche sostanzialmente diverso. Da notare che, in questo caso, il colore del bordo è definito da $bordercolor; vuol dire che è presente come variabile e può essere cambiato nella sezione Caratteri e Colori. 4 pixel di padding significa che l'immagine disterà quel valore dal bordo in tutte e quattro le direzioni. 1 pixel di bordo è la sua dimensione mentre solid ne indica l'aspetto. Invece di solid potrebbe essere inserito double (doppia riga), dotted (punteggiato), dashed (tratteggiato), ridge (stile in rilievo).

Si possono inserire valori diversi e si può anche inserire un'immagine di background che si visualizzi nello spazio del padding cioè tra l'immagine e il suo bordo. L'immagine che si sceglie come sfondo deve essere necessariamente piccola e si riprodurrà automaticamente in tutte le direzioni. Ovviamente dovrà essere caricata in un hosting gratuito tipo Skydrive.

Gli esempi sono molto spesso più efficaci di qualunque trattazione teorica; quindi ho caricato questa immagine su Skydrive e ne ho acquisito l'URL.

Adesso ho modificato il codice dello stile delle immagini in questo modo

.post img {
  padding:15px;
  border:3px solid #003366;
  background: URL(URL_immagine)
  }

Se adesso si salva il template, qualsiasi immagine, anche quelle già pubblicate, avranno un aspetto simile a questa

Nel caso in cui in modello non esista la riga .post img {  si può sempre aggiungere il precedente blocco di codice cercando l'altra riga ]]></b:skin> e incollandolo immediatamente sopra.

Sono piuttosto scarso in quanto a gusto artistico e certo la maggior parte di voi saprà fare di meglio.