Pubblicato il 25/04/14 - aggiornato il  | 8 commenti :

Come inserire uno sfondo e un bordo nei contenuti dei post di Blogger.

Come inserire uno sfondo colorato o con una immagine insieme a un bordo continuo, solido o tratteggiato in tutto o solo in una parte di un post di Blogger modificando il modello o solo il codice di un singolo post.
In dei commenti ricevuti in questi giorni mi è sembrato di cogliere il desiderio di alcuni lettori di inserire uno sfondo e/o un bordo nei post di Blogger. Per poter sfruttare in pieno le possibilità offerte dall’HTML e dal CSS dobbiamo avere almeno una infarinatura di questi linguaggi di markup. Ricordo che si può scaricare gratuitamente il mio ebook dal titolo Guida all’HTML e al CSS e che si possono consultare i post sui codici dei colori e sullo stile dei bordi.

È possibile inserire bordi e sfondi in tutti gli articoli di Blogger oppure soltanto in alcuni di esssi. Nel primo caso si opera nel modello mentre nel secondo basta incollare un codice in Modalità HTML direttamente nel post.

INSERIRE SFONDO E BORDO IN TUTTI I POST


Per visualizzare sfondi e bordi in tutti i post dopo aver salvato il template si va su Modello > Modifica HTML e si clicca sull’aerea del codice. Si digita Ctrl+F (OS Windows) e si cerca la riga

.post-body
Si dovrebbe visualizzare un blocco di codice simile a questo
.post-body
  font-size: 110%;
  line-height: 1.4;
  position: relative;
}

Per inserire bordo e sfondo basterà incollare altre righe in questo modo

.post-body {
  border: 2px dashed #036;
  background:#FFF;
  padding:3px;
  font-size: 110%;
  line-height: 1.4;
  position: relative;
}

dopo si salva il modello. Con il codice proposto viene inserito uno sfondo bianco (#FFF) e un bordo dello spessore di 2 pixel, tratteggiato (dashed) e del colore #036. I 3 pixel di padding servono per distanziare il bordo dal resto del post. Se si vuole inserire una immagine di sfondo si possono utilizzare al posto delle tre righe precedenti queste altre

border: 2px dashed #036;
background:transparent url(https://lh3.googleusercontent.com/-T-nmKKIj4No/T_baSXE7_ZI/AAAAAAAAY9c/cZVMIaT6iRE/s900/texture3.jpg);

dove ho lasciato l’URL della immagine che ho usato come test che si ripete in senso orizzontale e verticale.


post-con-sfondo-immagine
Se al posto di una immagine che si ripete vogliamo utilizzare una foto grande dobbiamo inserire invece queste due righe ovviamente dopo averle personalizzate

border: 2px dashed #036;
background:transparent url(Indirizzo Immagine Sfondo) no-repeat;

INSERIRE BORDO E SFONDO IN UN SINGOLO POST


Se l’inserimento di bordo e sfondo è da considerarsi un fatto eccezionale possiamo direttamente operare nel codice del singolo post. In questo caso il bordo e lo sfondo possono essere inseriti per racchiudere tutto l’articolo oppure solo una sua parte magari per evidenziarla. Penso per esempio a siti di ricette o a blog di tecnologia per presentare la scheda di un prodotto in modo più evidente.

Il sistema che vi propongo prevede di usare il tag <div> per racchiudere la parte del post da visualizzare con bordo e sfondo. Nel div di apertura basterà inserire lo stile che si preferisce. Quindi dopo aver scritto l’articolo si fissano il punto di inizio e di fine del contenuto in cui inserire bordo e sfondo. Si va su HTML che si trova accanto a Scrivi e nel punto di inizio si incolla questo codice

<div style="background:#BFF; border: 1px dotted #036;">

mentre nel punto in cui si vuole che terminino bordo e sfondo si incolla </div>.

sfondo-bordo-post

Nel codice precedente ho proposto uno sfondo di colore #BFF con un bordo punteggiato (dotted) dello spessore di un pixel. Dopo aver pubblicato si visualizzerà il contenuto racchiuso dai due tag <div> così

racchiudere-post-bordo-sfondo

Anche in questo caso si può usare una immagine al posto di un colore. Si può per esempio usare il div di apertura con questo codice

<div style='background:transparent url(https://lh3.googleusercontent.com/-T-nmKKIj4No/T_baSXE7_ZI/AAAAAAAAY9c/cZVMIaT6iRE/s900/texture3.jpg);'>

che porta ad avere questo risultato

sfondo-post-blogger Enjoy.


8 commenti :

  1. Tu, Ernesto, devi avere doti da preveggente. Perché proprio ieri pensavo che mi servirebbe una cosa del genere su alcune parti di alcuni post. Well done! ;)
    Giuliana

    RispondiElimina
  2. mettendo una foto grande all'inizio dei miei post post ho l'esigenza di inserire lo sfondo a metà di ogni post dopo foto grande e prefazione,per intenderci nella descrizione delle ricette fino al fondo del post,posso farlo agendo direttamente nel template oppure devo modificare ogni singolo post manualmente?grazie!!!

    RispondiElimina
    Risposte
    1. No. Devi mettere lo sfondo dall Html del post. Si può anche inserire il codice nel template ma in ogni caso devi modificare il post aggiungendo la classe a partire dal paragrafo in cui vuoi visualizzare lo sfondo.
      @#

      Elimina
    2. ok grazie mi attende un lungo lavoro circa 578 post da modificare!!!

      Elimina
  3. Buongiorno Ernesto.avrei bisogno di un bordo sfondo che distingua la scritta ,"Stamapa l' articolo" alla fine dell' articolo, potresti indicarmi qualcosa del genere? Grazie

    RispondiElimina
    Risposte
    1. Guarda se ti può aiutare questo post
      https://www.ideepercomputeredinternet.com/2015/09/blogger-bordi-sidebar-footer-header-widget-stile.html
      anche se tratta un argomento moto diverso da quello che ti serve. Però questo codice
      <div style="border: dashed #f00 6px;">Testo da mettere nel riquadro con il bordo</div>
      può essere un buon punto di partenza
      @#

      Elimina
    2. Ciao Ernesto, ho cosultato il post che mi hai consigliato. Ho provato a insatallare i due condici per il bordo di un solo vidget, ma è apparso sulla barra laterale alla voce "Articoli e servizi in archivio".

      Elimina
    3. Il post era per dare una idea di come procedere. Il codice da usare è quello indicato nel commento 3.a dove al posto di "Testo da mettere nel riquadro con il bordo" devi inserire il codice dell'oggetto che vuoi mettere all'interno di un bordo
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy