Pubblicato il 29/09/14e aggiornato il

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. 

colori-immagini-blogger

È 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

inserire-bordi-cornici-immagini

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 

cornice-immagine-blogger

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

cornice-immagine-singola

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.




8 commenti :

  1. scusami Ernesto ma da me non c'è opzione immagini

    RispondiElimina
    Risposte
    1. Il seguito del post è rivolto proprio a chi come te ha un modello che non supporta interamente tutte le funzionalità del Designer Modelli
      @#

      Elimina
  2. Ernesto volevo mettere il gadget in un altro mio blog che avevi messo mesi fa da inserire nel piè di pagina degli ultimi articoli...dove si vedeva la miniatura e parte del testo....mi ricordo che bisognava entrare nell'editor e copiare l'id del post poi non mi ricordo altro.....help

    RispondiElimina
  3. Ciao Ernesto, se invece volessi mettere la cornice attorno una descrizione che ho messo nella barra laterale, come si fa ? Mi spiego meglio, ho visto in alcuni blog la foto tonda con sopra un "fumetto" con la loro descrizione.. é difficile? Grazie.

    RispondiElimina
    Risposte
    1. Ci sono degli script appositi per questi effetti. Mi ricordo questo
      http://www.ideepercomputeredinternet.com/2012/08/css-popup-effetto-immagini-blogger.html
      anche se non è proprio quello che hai indicato che non conosco
      @#

      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.