Pubblicato il 31/10/09 - aggiornato il  | 26 commenti :

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
effetto_sfoglia_pagina
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(http://1.bp.blogspot.com/_JwD5r652h00/Sutu6mRBnpI/AAAAAAAAAN4/82pbOVmnl1Y/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

image

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 -




26 commenti :

  1. Molto carino,grazie!
    voglio proprio cimentarmi in questa impresa ardua :-)
    proverò sul blog di prova ovviamente.
    Ti racconterò cosa son riuscita a fare.
    buon w.e.
    Lella

    RispondiElimina
  2. Ciao anche a te Lella, vedrai che ne verrà fuori un bel lavoro. Sono accorgimenti adatti a blog tipicamente femminili :)

    RispondiElimina
  3. ecco lo sapevo.Non ci sono riuscita.
    Ho caricato su skydrive ,ho preso indirizzo e copiato al punto giusto;ho inserito il pezzo prima della chiusura della parentesi,ma nulla.
    Dove ho sbagliato?
    Lella

    RispondiElimina
  4. Hi,Parsifal. se vedi nel Mio Post di Hallowin ho aggiunto questi divisori per rendere il posto un poco gioioso e colorato. Purtroppo quando li metto sul Post le figure sono circondata da un bord/ cornice da un colore che posso stabilire anche io stessa. ora nel nuovo post ho aggiunto anche delle figure trà il testo nel post, mah ho dovuto cambiare il colore del bordo in BIANCO in modo chè resti invisibile,visto che lo sfondo é chiaro, uffi,così facendo me sparito anche il bordo divisore nella parte destra del blog. eppure nell HTML il bord contiene ='0'. non so perche esce lo stesso
    Salutoni.
    Rosa

    RispondiElimina
  5. @Un tocco di Rosa
    Non saprei come aiutarti. Saprai che ogni modello fa un po' storia a sé e le personalizzazioni qualche volta funzionano altre no :((

    RispondiElimina
  6. @lella
    Ho controllato il codice del tuo blog. Il fatto è che non hai una sezione del post, cioè non è presente la riga
    .post {
    ma solo delle righe simili. Non hai quindi sbagliato nulla è solo che il tuo template non è adatto all'inserimento di questa personalizzazione almeno con queste modalità, mi spiace.
    Ciao

    RispondiElimina
  7. ahhhh adesso ho capito.
    Pazienza,mi sarebbe piaciuto.
    Volevo chiederti,visto che produci in continuazione articoli interessanti e non riesco a starti dietro,come faccio a ripescare post ke mi interessano?a volte mi risulta difficile anke andando x categorie o cercando sulla barra delle ricerche.
    Lella

    RispondiElimina
  8. @lella
    Anche io avevo il tuo problema visto che quando vedevo un articolo interessante successivamente mi sarebbe piaciuto rileggerlo con più calma.
    Ho risolto con una estensione per Firefox che salva gli articoli che ti interessano e che puoi sempre andare a riprendere. L'add-on si chiama Read it Later e già il nome è tutto un programma.
    Limitatamente al mio sito puoi anche andare sulla destra dove c'è la mappa del blog e cliccare su "Mappa del sito per giorni e mesi", vedrai gli ultimi 500 articoli tutti ordinati per data!
    ...e scusa se sono pochi :)

    RispondiElimina
  9. pochi?Te sei un genio del pc.
    Ho provato ad aprire la mappa del sito e solo oggi mi ha aperto la pagina,mentre prima me la dava bianca;la mappa x categorie invece è ancora bianca.
    Vedi....non riesco ad aprire neanche le pagine,figuriamoci altro.
    Cmq hai troppi articoli interessanti e sto cercando di memorizzarli x averli sempre a portata di mano.
    Grazie sempre x l'enorme lavoro che fai x tutti noi.
    Buon fine settimana
    Lella

    RispondiElimina
  10. @lella
    Non riesci ad aprire la pagina delle categorie perché ti ostini ancora ad usare Internet Explorer :((.
    Buon week-end anche a te

    RispondiElimina
  11. ops....... adesso stai entrando in un campo difficile x me.
    Tempo al tempo,sto appena imparando ad usare explorer,non posso fare un passo + lungo della mia gamba
    :-)
    Per l'uso che ne devo fare e x le mie possibilità di "comprensione" x il momento è sufficiente.
    Sto imparando tante cose grazie a te e fin dove posso le seguo.
    Ma tu cosa adoperi?
    Che vantaggi ha?
    Almeno inizio a farmi un'idea,a farmi una cultura :-)
    buon w.e.
    Lella

    RispondiElimina
  12. @lella
    Io adopero Firefox ed è un browser con il quale puoi vedere praticamente tutto, cosa invece che non succede con IE. Inoltre IE qualche volta non apre delle pagine, ti sarà capitato di leggere "Impossibile aprire la pagina per...".
    Con Firefox inoltre hai a disposizione migliaia e migliaia di componenti aggiuntivi per fare con il browser un sacco di cose che nemmeno ti immagini.
    Per avere un'idea puoi dare uno sguardo a questo articolo. Ciao

    RispondiElimina
  13. mamma mia quante cose si possono fare!
    Se volessi provarlo prima sul mio portatile,dove posso scaricarlo?
    posso lasciare explorer o devo disinstallarlo?E' compatibile con XP?
    grazie :-)
    Lella

    RispondiElimina
  14. @lella
    Tu puoi avere installati tutti i browser che vuoi. Io per esempio ho IE, Firefox, Chrome e Opera. Il computer, sia desktop che portatile, XP, Vista o 7, vorrà solo sapere quello predefinito per aprirlo quando si clicca su un collegamento ad una pagina web.
    Puoi scaricare Firefox da qui e puoi importare automaticamente tutti i Preferiti che hai su Internet Explorer. Se non lo fa in automatico vai su Organizza Segnalibri > Organizza i segnalibri > Importa e Salva.
    Per una persona che va molto su internet come te che hai un blog, usare Firefox è imprescindibile. E' come passare dall'editor di Blogger a Windows Live Writer.
    Ciao e Buona Domenica

    RispondiElimina
  15. l'ho scaricato,grazie!
    Adesso vado a provarlo.
    Mi emoziono quando scopro cose nuove,proprio come i bambini :-)
    a presto,ti saprò dire.....
    grazie ancora Lella

    RispondiElimina
  16. Grazie per la guida passo passo!

    RispondiElimina
  17. Giorno Parsifal, sono azzurra di Grafic Scribbles....volevo informarti del fatto che ho usato il tuo post in un mio post:

    http://graficscribbles.blogspot.com/2011/03/inserire-un-divisore-in-fondo-al-post.html

    non so che razza di pasticcio avessi combinato e come ho fatto a partorire il codice che avevo postato...propio non me lo ricoro :(
    Adesso con il tuo è tutto ok naturalmente!
    Se la cosa ti infastisce rimuovo subito il link a questo tuo post...
    fammi sapere
    Buona giornata !
    :)

    RispondiElimina
  18. ciao ho seguito i tuoi consigli per inserire il divisorio nei post e ha funzionato benissimo ^^ grazie

    RispondiElimina
  19. se la stringa è assente basta copiare tutto il blocco di codice sopra in "aggiungi css"

    .post {
    margin:.5em 0 1.5em;
    border-bottom:1px dotted $bordercolor;
    padding-bottom:1.5em;
    background: url(http://1.bp.blogspot.com/_JwD5r652h00/Sutu6mRBnpI/AAAAAAAAAN4/82pbOVmnl1Y/s1600/bloodrose.gif);
    background-repeat: no-repeat;
    background-position: bottom center;
    margin:.5em 0 1.5em;
    padding-bottom:6.5em;
    }

    RispondiElimina
  20. ho messo anche questa opzione, è molto carina, grazie!

    RispondiElimina
  21. Ciao per cortesia vorrei sapere come fare un divisorio tra un post e l'altro per blog
    e incollarlo in un gadget di tipo html/javascript della sidebar.
    Grazie saluti
    Elise

    RispondiElimina
    Risposte
    1. Un divisorio tra post e post è possibile farlo con le istruzioni di questo articolo ma non si può incollare in un gadget HTML/Javascript
      @#

      Elimina
    2. Ti ringrazio Ernesto.
      Buona serata

      Elimina
    3. Forse ti riferivi a questo
      http://www.ideepercomputeredinternet.com/2016/04/blogger-widget-separare-immagini-righe.html
      @#

      Elimina
    4. Ti ringrazio tantissimo Ernesto, sei gentilissimo, ma io cerco un codice html da incollare in un gadget di tipo html/javascript.
      Grazie ancora, buona serata
      Elise

      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.