Come dividere i post con linee e immagini in Blogger.

Come mostrare una immagine o una riga come divisione tra post e post in Blogger.

I modelli di Blogger personalizzati hanno dei layout originali ed è per questa ragione che spesso vengono preferiti a quelli ufficiali di Blogger. Con questi ultimi però si possono implementare tutta una serie di personalizzazioni in modo da renderli non solo originali ma unici. Infatti quando si installa un template da internet solitamente non siamo i soli ad aver scelto proprio quel modello mentre se modifichiamo il modello di Blogger da soli potremo aggiunger un tocco personale che lo differenzierà da tutti gli altri.

Una modifica piuttosto semplice e anche molto richiesta è quella dell'aggiungere una immagine di separazione tra post e post da visualizzare in homepage, nelle pagine delle etichette e in quelle di archivio. Un'altra modifica altrettanto banale è invece quella di aggiungere una riga o una immagine di separazione tra widget e widget in una sidebar.

Per questa operazione, dopo aver salvato il template, si va su Modello > Modifica HTML e si cerca il blocco di codice che sovrintende all'aspetto degli articoli e che ha solitamente la classe .post-body. Si trova nella sezione <b:skin> e dovremo cliccare sulla freccetta nera sulla sinistra per visualizzarla tutta. Mediante Ctrl+F  in un modello Semplice il codice che si trova è il seguente

.post-body {
  font-size: 110%;
  line-height: 1.4;
  position: relative;
}

Nei modelli vecchi il selettore univoco potrebbe essere .post mentre per i template scaricati da internet bisogna trovarlo da soli usando gli strumenti Ispeziona Elemento di Chrome o Analizza Elemento di Firefox. Per aggiungere una riga tra post e post integreremo quel codice così

.post-body {
  font-size: 110%;
  line-height: 1.4;
  position: relative;
  border-bottom:3px double #036; }

con l'aggiunta della riga evidenziata di giallo che può essere personalizzata nei codici dei colori e nello stile del bordo. Il risultato sarà simile a questo



La linea di divisione si vedrà però anche nei post singoli alla fine dell'articolo

Se invece tale linea non la volessimo visualizzare nei post lasceremo intatto il codice del blocco e aggiungeremo subito sopra la riga </head> quest'altro codice

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-body {
border-bottom:4px double #369;   }
</style>
</b:if>

dove la parte da personalizzare è sempre quella evidenziata di giallo.

COME AGGIUNGERE UNA IMMAGINE DI SEPARAZIONE

Al posto di una riga inserita con il tag border-bottom si può mostrare una immagine che dovrà essere postata su Picasa Web Album e di cui si dovrà ricavare l'URL diretto.  Si opera nello stesso modo visto nella precedente sezione. Al posto della riga evidenziata di giallo dovremo però inserire il codice di una immagine di sfondo quindi invece della semplice riga dovremo incollare un blocco con le stesse modalità. Se decidiamo di mostrare l'immagine solo nella Home o nelle pagine di Etichette o Archivio useremo il secondo codice da incollare sopra a </head> però così modificato

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-body {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkl2wB7MC1d-LaXqVK-AVEfdBLmRVrIiE7Ts5domwuLXfmr7av4nvUZzuAgGLFUCrHlKpf7hEaG3fAPl-kkDWeYf2bHABPs_BvlUi57mJlbe1rAExNhYUDRoh8XjEsCjJVGCFTbWKa_Omi/s1600/bloodrose.gif);
background-repeat: no-repeat;
background-position: bottom center;
padding:80px;
}
</style>
</b:if>

Dopo aver salvato il modello il risultato sarà il seguente

Si possono usare anche immagini animate in GIF come del resto ho fatto in fase di test. Le immagini inserite è bene che siano larghe e molte strette. Nel prossimo articolo vedremo come inserire delle linee o delle immagini di divisione tra widget e widget in una data sidebar.