Come inserire una immagine anche animata per separare gli articoli in un blog su Blogger.

Inserire una immagine anche animata per dividere gli articoli di Blogger

Prima di leggere l'articolo date uno sguardo al blog Effetto Sfoglia Pagina che ho usato come cavia per inserire questa personalizzazione. Come vedete alla fine di ciascun post c'è un'immagine di divisione, nella fattispecie una rosa sanguinante

Per fare in modo che nel vostro blog tra un post e l'altro possa essere inserita una qualsiasi immagine dovete andare su Layout > Modifica HTML e salvare il modello completo. Pigiando F3 o Ctrl+F, cercate la riga con .post che indicherà l'inizio del CSS che definisce lo stile del post. Il blocco di codice potrà essere più o meno di questo tipo

.post {   margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }

dove le parentesi graffe evidenziate di rosso rappresentano l'inizio e la fine della definizione dello stile. Per aggiungere l'immagine separatrice tra i vari post che si vedrà, non solo in Homepage, ma anche alla fine di tutti gli articoli, dovete inserire questo codice

background: url(URL_Immagine);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;

dove al posto di URL_Immagine si deve sostituire l'indirizzo dell'immagine caricata su un hosting e il valore 2.5 dovrà essere personalizzato per fare in modo che l'immagine non interferisca con il resto del post. Si possono scegliere valori indicativamente tra 1.5 e 6.5 in ogni caso dipende unicamente dal vostro modello. Occorre fare delle prove per trovare il numero giusto da inserire.
Lo stile del post diviene così una cosa di questo tipo

.post {   margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
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;
margin:.5em 0 1.5em;
padding-bottom:6.5em;   }

dove la parte in rosso è quella che è stata aggiunta al template che alla fine dovrà essere salvato. Da notare che dopo la parte in rosso dovrà esserci la parentesi graffa di chiusura, indicata in grassetto.
Inserisco qui di seguito delle immagini che possono essere utilizzate come divisori dei post. Cliccando sopra a ciascuna di esse se ne può acquisire l'URL andando nella barra degli indirizzi come mostrato nello screenshot



Le immagini sono state prese da AllBlogTools

 















 Al posto delle immagini proposte possono anche essere inserite delle immagini a piacere. E' sufficiente caricarle su un hosting, acquisirne l'indirizzo e inserirlo al posto di URL_Immagine nel codice precedente.
P.S. Ho sostituito la rosa sanguinante con dei cuoricini lampeggianti che sono decisamente più allegri.
Fonte | Add a Post Divider (Separator) Between Blogger (Blogspot) Posts -